/*! Modele programme v2 - Tisserin Promotion.
    GENERE, ne pas editer a la main : la source est
    projets/SITES/TISSERIN_PROMOTION/template-programme/mockup.html,
    regeneree par _php/extrait-css.py.

    POURQUOI UN IDENTIFIANT ET DES !important, mesure le 2026-08-20 :
    le plugin `apsulis` du site 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 :

      .redesign-tisserin:not(.elementor-template-full-width):not(.elementor-template-canvas) h1
      { font-family:"Canela Thin"!important; font-size:40px!important; color:#457275!important }

    Resultat au premier essai : le h1 du hero sortait en Canela Thin vert a 40px
    au lieu de blanc a 84px, et le sous-titre en Spartan 13px. Aucune specificite
    ne peut battre un !important, donc deux leviers, tous les deux necessaires :

      1. le scope est un IDENTIFIANT `#tpv2`. Un id (1-0-0) bat n'importe quel
         nombre de classes, donc leur (0-3-1) ;
      2. !important est ajoute uniquement sur les CINQ proprietes qu'ils ecrasent,
         relevees dans leur feuille : font-size, line-height, font-family, color,
         text-transform. Pas un tapis de !important, la liste est mesuree.

    Les regles `body[data-vendu="1"]` de la maquette ne sont PAS reprises : la
    maquette bascule l'etat epuise par un attribut, ici c'est le PHP qui choisit
    quoi rendre, et les garder masquerait le statut et le panneau en production.

    Le CSS des sections que le modele ne rend pas encore est elague. */
:root{
  --tp:#457275;
  --tp-fonce:#0F3D40;
  --menthe:#D7F5F7;
  --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;
  /* hauteur reelle de l'entete du site, mesuree a 123px. La scene du hero
     occupe le reste de l'ecran, donc son bas reste visible sans defiler. */
  --chrome:123px}
#tpv2 *{box-sizing:border-box;margin:0;padding:0}
#tpv2{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}
#tpv2 .wrap{max-width:1220px;margin:0 auto;padding:0 32px}
#tpv2 a{color:inherit!important;text-decoration:none}
#tpv2 img{display:block;width:100%}
#tpv2 h1{font-size:38px!important;font-weight:700;line-height:1.2em!important;letter-spacing:-.4px;color:var(--titre)!important}
#tpv2 h2{font-size:26px!important;font-weight:700;line-height:1.3em!important;letter-spacing:-.4px;color:var(--titre)!important}
#tpv2 h3{font-size:19px!important;font-weight:600;line-height:1.4em!important;color:var(--titre)!important}
#tpv2 h4{font-size:16px!important;font-weight:600;color:var(--titre)!important}
#tpv2 .chapo{font-size:17px!important;line-height:1.65em!important;color:var(--texte)!important;max-width:62ch}
#tpv2 .tete .chapo{max-width:900px}
#tpv2 .petit{font-size:13.5px!important;line-height:1.6em!important;color:var(--attenue)!important}
#tpv2 .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;text-transform:none!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)}
#tpv2 .btn:hover{background:var(--tp-fonce);color:#fff!important;border-color:var(--tp-fonce)}
#tpv2 .btn--blanc{background:#fff;color:var(--tp)!important;border-color:#fff}
#tpv2 .btn--blanc:hover{background:var(--menthe);color:var(--tp-fonce)!important;border-color:var(--menthe)}
#tpv2 .btn--nu{background:#fff;color:var(--tp)!important;border-color:var(--filet)}
#tpv2 .btn--nu:hover{background:var(--menthe);color:var(--tp-fonce)!important;border-color:var(--menthe-2)}
#tpv2 .btn--clair{background:0;color:#fff!important;border-color:rgba(255,255,255,.42)}
#tpv2 .btn--clair:hover{background:#fff;color:var(--tp-fonce)!important;border-color:#fff}
#tpv2 .btn--bloc{width:100%}
#tpv2 .btn--bloc.cta{justify-content:space-between}
#tpv2 .btn svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;stroke-width:1.7}
#tpv2 .hero{background:#fff;padding:28px 36px 36px;height:calc(100vh - var(--chrome));
  display:flex;flex-direction:column}
#tpv2 .hero-cadre{position:relative;flex:1;min-height:0}
#tpv2 .hero-cadre>img{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 58%;border-radius:22px}
#tpv2 .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,.60) 32%,
    rgba(9,32,34,.22) 58%,rgba(9,32,34,.08) 78%,rgba(9,32,34,.18) 100%)}
#tpv2 .hero-txt{position:absolute;z-index:2;top:56px;left:52px;max-width:54%}
#tpv2 .hero-txt h1{font-size:84px!important;font-weight:800;line-height:.95em!important;letter-spacing:-3.2px;
  color:#fff!important;text-transform:none!important}
#tpv2 .hero-txt .sous{font-size:24px!important;font-weight:600;color:#fff!important;margin-top:16px;line-height:1.28em!important}
#tpv2 .hero-txt p.accroche{font-size:15.5px!important;color:rgba(255,255,255,.86)!important;margin-top:18px;
  line-height:1.7em!important;max-width:48ch}
#tpv2 .entaille{position:relative;background:#fff;
  border-top-left-radius:var(--raccord);padding:18px 26px 16px 30px}
#tpv2 .entaille::before, #tpv2 .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))}
#tpv2 .entaille::before{left:calc(var(--raccord) * -1);bottom:0}
#tpv2 .entaille::after{right:0;bottom:100%}
#tpv2 .entaille-faits{display:flex;align-items:center;gap:30px}
#tpv2 .entaille-faits span{display:block;font-size:11.5px!important;color:var(--attenue)!important;line-height:1.5!important}
#tpv2 .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}
#tpv2 .entaille-faits .prix b{font-size:23px!important;font-weight:800;color:var(--tp)!important;letter-spacing:-.6px;
  margin-top:0}
#tpv2 .entaille-faits .statut b{color:var(--titre)!important}
#tpv2 .cta{padding:7px 9px 7px 24px;gap:15px}
#tpv2 .cta .fleche{position:relative;overflow:hidden;flex:0 0 38px;width:38px;height:38px;
  border-radius:19px;background:rgba(255,255,255,.22)}
#tpv2 .btn--blanc.cta .fleche, #tpv2 .btn--nu.cta .fleche{background:var(--tp)}
#tpv2 .cta .fleche svg{position:absolute;top:11px;left:11px;width:16px;height:16px;stroke:#fff;
  stroke-width:2;transition:transform .5s var(--sortie)}
#tpv2 .cta .fleche svg+svg{transform:translate(-160%,160%)}
#tpv2 .cta:hover .fleche svg{transform:translate(160%,-160%)}
#tpv2 .cta:hover .fleche svg+svg{transform:none}
#tpv2 .hero-bas{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;
  justify-content:flex-end}
#tpv2 .hero-cta{position:absolute;top:0;left:52px;box-shadow:var(--ombre-forte)}
#tpv2 .offre-carte{background:var(--tp);color:#fff!important;border-radius:18px;padding:26px 30px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap}
#tpv2 .offre-carte .t{font-size:21px!important;font-weight:700;letter-spacing:-.3px;line-height:1.3!important}
#tpv2 .offre-carte .c{font-size:14px!important;color:rgba(255,255,255,.82)!important;line-height:1.5em!important;margin-top:3px}
#tpv2 .offre-carte .d{background:rgba(255,255,255,.16);border-radius:8px;padding:9px 15px;
  font-size:14px!important;font-weight:600;margin-left:auto}
#tpv2 .bloc{padding:70px 0}
#tpv2 .bloc--blanc{background:#fff}
#tpv2 .bloc--menthe{background:#E4F2F2}
#tpv2 .bloc--sombre{background:var(--tp-fonce);color:rgba(255,255,255,.80)!important}
#tpv2 .bloc--sombre h2, #tpv2 .bloc--sombre h3{color:#fff!important}
#tpv2 .bloc--sombre .chapo{color:rgba(255,255,255,.76)!important}
#tpv2 .bloc--sombre .media-vue{background:linear-gradient(135deg,#17494C,#0B3134)}
#tpv2 .bloc--sombre .media-charge{background:#fff;color:var(--tp-fonce)!important}
#tpv2 .bloc--sombre .media-charge:hover{background:var(--menthe)}
#tpv2 .bloc--sombre .media-charge svg{stroke:var(--tp-fonce)}
#tpv2 .tete{margin-bottom:30px}
#tpv2 .tete h2{margin-bottom:10px}
#tpv2 .atouts{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:56px}
#tpv2 .atouts .picto{display:block;width:32px;height:32px;object-fit:contain;margin-bottom:18px}
#tpv2 .atouts svg{width:32px;height:32px;stroke:var(--tp);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
#tpv2 .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}
#tpv2 .atouts p{font-size:14.5px!important;line-height:1.7em!important;color:var(--texte)!important}
#tpv2 .atouts strong{color:var(--titre)!important;font-weight:600}
#tpv2 .prestas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px;
  margin-top:38px;padding-top:32px;border-top:1px solid var(--filet)}
#tpv2 .presta-groupe h3{font-size:13px!important;font-weight:700;color:var(--tp)!important;letter-spacing:.4px;
  text-transform:uppercase!important;margin-bottom:12px}
#tpv2 .presta-groupe ul{list-style:none}
#tpv2 .presta-groupe li{font-size:14px!important;line-height:1.5!important;color:var(--texte)!important;padding:6px 0;
  border-bottom:1px solid var(--filet-2)}
#tpv2 .presta-groupe li:last-child{border-bottom:0}
#tpv2 .av-line{display:flex;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:15px 0}
#tpv2 .av-line span{font-size:13.5px!important;font-weight:600;color:var(--titre)!important;line-height:1.5!important;
  padding:0 20px;border-right:1px solid var(--filet)}
#tpv2 .av-line span:first-child{padding-left:0}
#tpv2 .av-line span:last-child{border-right:0}
#tpv2 .av-line em{font-style:normal;font-weight:500;color:var(--attenue)!important}
#tpv2 .sim-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px;
  max-width:760px}
#tpv2 .sim-card{background:#fff;border:1px solid var(--filet);border-radius:16px;padding:28px;
  display:flex;flex-direction:column;
  transition:transform .22s var(--sortie),box-shadow .22s var(--sortie),
    border-color .22s var(--sortie)}
#tpv2 .sim-card:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte);border-color:var(--tp)}
#tpv2 .sim-card .picto{display:block;width:30px;height:30px;flex:0 0 auto;stroke:var(--tp);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
#tpv2 .sim-card h3{font-size:16.5px!important;margin-bottom:8px;line-height:1.35em!important}
#tpv2 .sim-card p{font-size:14px!important;line-height:1.65em!important;margin-bottom:18px;color:var(--texte)!important}
#tpv2 .sim-lien{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:14.5px!important;
  font-weight:600;color:var(--tp)!important}
#tpv2 .sim-lien svg{display:block;width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:2.4;transition:transform .22s var(--sortie)}
#tpv2 .sim-card:hover .sim-lien svg{transform:translateX(4px)}
#tpv2 .media-vue{position:relative;cursor:pointer;display:flex;align-items:center;
  justify-content:center;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,var(--menthe),var(--menthe-2))}
#tpv2 .media-vue--grand{height:min(68vh,620px)}
#tpv2 .loca{--qh:600px;display:grid;grid-template-columns:1.4fr minmax(0,1fr);
  gap:34px;align-items:start}
#tpv2 .loca .media-vue--grand{height:var(--qh)}
#tpv2 .loca-cote{display:flex;flex-direction:column}
#tpv2 .media-vue img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#tpv2 .media-vue iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#tpv2 .media-charge{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px;
  background:var(--tp);color:#fff!important;border:0;font-family:inherit!important;font-size:14px!important;font-weight:600;
  padding:13px 24px;border-radius:999px;cursor:pointer;white-space:nowrap;text-transform:none!important;
  box-shadow:0 10px 26px rgba(15,28,28,.25);transition:background .3s var(--sortie)}
#tpv2 .media-charge:hover{background:var(--tp-fonce)}
#tpv2 .media-charge svg{display:block;width:16px;height:16px;flex:0 0 auto;stroke:#fff;fill:none;
  stroke-width:2}
#tpv2 .media-vue.charge .media-charge{display:none}
#tpv2 .media-adr{display:flex;gap:10px;font-size:14.5px!important;line-height:1.6em!important}
#tpv2 .media-adr svg{display:block;width:15px;height:15px;flex:0 0 15px;margin-top:4px;
  stroke:var(--tp);fill:none;stroke-width:1.8}
#tpv2 .media-adr b{color:var(--titre)!important;font-weight:600}
#tpv2 .media-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
#tpv2 .media-actions .btn{padding:11px 20px;font-size:13.5px!important}
#tpv2 .typos{border:1px solid var(--filet);border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:var(--ombre)}
#tpv2 .typo{border-bottom:1px solid var(--filet)}
#tpv2 .typo:last-child{border-bottom:0}
#tpv2 .typo-ligne{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:24px;align-items:center;
  padding:22px 26px;width:100%;background:0;border:0;font-family:inherit!important;text-align:left}
#tpv2 .typo-nom{font-size:19px!important;font-weight:700;color:var(--titre)!important;letter-spacing:-.3px}
#tpv2 .typo-nom span{display:block;font-size:13.5px!important;font-weight:500;color:var(--attenue)!important;margin-top:2px}
#tpv2 .typo-col{font-size:15px!important;color:var(--texte)!important}
#tpv2 .typo-col b{display:block;font-size:17px!important;font-weight:700;color:var(--titre)!important;letter-spacing:-.2px}
#tpv2 .typo-prix b{color:var(--tp)!important;font-size:19px!important}
#tpv2 .vendu{background:#fff;border:1px solid var(--filet);border-radius:18px;
  padding:44px 46px;box-shadow:var(--ombre)}
#tpv2 .vendu h2{margin-bottom:12px}
#tpv2 .vendu .chapo{max-width:60ch}
#tpv2 .vendu-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;align-items:center}
#tpv2 .conseil{background:var(--tp);border-radius:12px;padding:36px;color:#fff!important;
  display:grid;grid-template-columns:1.3fr auto;gap:40px;align-items:center}
#tpv2 .conseil h2{color:#fff!important}
#tpv2 .conseil p{color:rgba(255,255,255,.86)!important;font-size:15.5px!important;line-height:1.7em!important;max-width:46ch;margin-top:10px}
#tpv2 .conseil-actions{display:grid;gap:10px;min-width:238px}
#tpv2 .mentions{font-size:12px!important;color:#94A3B8!important;line-height:1.7em!important}
#tpv2 .ml{max-width:820px;border-top:1px solid var(--filet);padding-top:20px}
#tpv2 .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}
#tpv2 .ml summary::-webkit-details-marker{display:none}
#tpv2 .ml summary:hover{color:var(--tp)!important}
#tpv2 .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)}
#tpv2 .ml[open] summary svg{transform:rotate(180deg)}
#tpv2 .ml .mentions{margin-top:18px}
#tpv2 .ml .mentions sup{color:var(--attenue)!important}
#tpv2 .rev{opacity:0;transform:translateY(20px);transition:opacity .55s var(--sortie),transform .55s var(--sortie)}
#tpv2 .rev.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  #tpv2 .rev{opacity:1;transform:none;transition:none}
}
@media(max-width:1000px){
  #tpv2 .wrap{padding:0 20px}
  #tpv2 .bloc{padding:52px 0}
  #tpv2 .hero{padding:14px;height:auto;display:block}
  #tpv2 .hero-cadre{flex:0 0 auto;height:auto}
  #tpv2 .hero-cadre>img{position:relative;height:auto;aspect-ratio:4/3;border-radius:14px}
  #tpv2 .hero-cadre::after{display:none}
  #tpv2 .hero-txt{position:static;max-width:none;padding:22px 2px 0}
  #tpv2 .hero-txt h1{font-size:44px!important;letter-spacing:-1.6px;color:var(--titre)!important}
  #tpv2 .hero-txt .sous{font-size:17px!important;margin-top:8px;color:var(--tp)!important}
  #tpv2 .hero-txt p.accroche{font-size:15px!important;color:var(--texte)!important;margin-top:12px;max-width:none}
  #tpv2 .entaille{position:static;border-top-left-radius:0;padding:20px 2px 0}
  #tpv2 .entaille::before, #tpv2 .entaille::after{display:none}
  #tpv2 .entaille-faits{flex-wrap:wrap;gap:14px 30px;align-items:flex-start}
  #tpv2 .entaille-faits b{white-space:normal}
  #tpv2 .hero-bas{position:static;display:block}
  #tpv2 .hero-cta{position:static;display:flex;width:100%;margin-top:18px;box-shadow:none;
    background:var(--tp);color:#fff!important}
  #tpv2 .hero-cta:hover{background:var(--tp-fonce);color:#fff!important}
  #tpv2 .cta .fleche{background:rgba(255,255,255,.2);margin-left:auto}
  #tpv2 .atouts{grid-template-columns:1fr;gap:28px;margin-top:32px}
  #tpv2 .atouts svg, #tpv2 .atouts .picto{margin-bottom:12px}
  #tpv2 .typo-ligne{grid-template-columns:1fr;gap:6px;padding:16px 20px}
  #tpv2 .typo-col:not(.typo-prix){display:none}
  #tpv2 .typo-prix{font-size:13px!important;line-height:1.45em!important}
  #tpv2 .typo-prix b{font-size:15.5px!important}
  #tpv2 .sim-grid{grid-template-columns:1fr;gap:14px}
  #tpv2 .av-line{display:block;padding:12px 0}
  #tpv2 .av-line span{display:inline-block;padding:0 14px 0 0;border-right:0}
  #tpv2 .loca{grid-template-columns:1fr;gap:22px}
  #tpv2 .loca-cote{display:block}
  #tpv2 .media-vue--grand, #tpv2 .loca .media-vue--grand{height:300px}
  #tpv2 .conseil{grid-template-columns:1fr;gap:26px;padding:28px}
  #tpv2 .conseil-actions{min-width:0}
  #tpv2 .vendu{padding:30px 26px}
  #tpv2 .offre-carte{padding:22px}
  #tpv2 .offre-carte .d{margin-left:0}
  #tpv2 .offre-carte .btn{width:100%;text-align:center}
}
@media(max-width:560px){
  #tpv2 h1{font-size:29px!important}
  #tpv2 h2{font-size:22px!important}
  #tpv2 .hero-txt h1{font-size:37px!important;letter-spacing:-1.2px}
  #tpv2 .hero-txt .sous{font-size:16px!important}
}