/* ============================================================
   TRYDE STUDIO — v2 « moins classique » — CLOISONNÉE
   ------------------------------------------------------------
   Toutes les règles vivent sous .tv2 : ce fichier ne peut pas
   toucher une page qui ne porte pas cette classe (pages v1,
   mentions légales, etc.). Aucune remise à zéro globale.
   ------------------------------------------------------------
   Mêmes tokens que styles.css. Ce fichier ne remplace rien :
   il ne sert qu'à accueil-v2.html, pour comparer.
   ============================================================ */

:root{
  --ivoire:#F7F3EC; --surface:#FDFBF7; --sable:#EFE8DC; --filet:#E5DDCE;
  --noir:#171210; --surface-sombre:#221C18; --filet-sombre:#372E27;
  --encre:#1D1814; --texte:#4D453B; --discret:#857A6B; --ivoire-texte:#F2EDE3;
  --or:#A98850; --or-lumineux:#C8A56C; --or-profond:#8A6D3C; --voile-or:#F0E7D5;

  /* Variantes reservees au TEXTE. Les couleurs de marque ci-dessus restent
     intactes pour les fonds, filets et grands aplats ; mais a 12-15 px sur
     fond clair elles plafonnent a 3:1, sous le minimum lisible de 4,5:1.
     Ces trois teintes sont les memes couleurs, juste assez foncees pour
     passer le seuil — l'ecart est invisible a l'oeil, decisif a la lecture. */
  --or-texte:#856B3F;          /* petits libelles sur ivoire   — 4,55:1 */
  --or-texte-fonce:#7E6437;    /* petits libelles sur voile-or — 4,54:1 */
  --discret-texte:#776D60;     /* mentions grises sur ivoire   — 4,59:1 */
  --titres:"Schibsted Grotesk",sans-serif; --texte-ui:"Inter",sans-serif;

  /* courbes d'animation — c'est là que se joue la sensation de soin */
  --sortie:cubic-bezier(.16,1,.3,1);      /* décélération longue, très "produit" */
  --douce:cubic-bezier(.4,0,.2,1);
  --conteneur:1180px;
}

.tv2 *{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
.tv2{
  font-family:var(--texte-ui);color:var(--texte);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  /* PAS d'overflow-x ici : un overflow autre que visible sur un ancetre
     annule position:sticky pour tous ses descendants — c'est ce qui figeait
     la section collante des offres. On borne la largeur autrement. */
  max-width:100vw;
}
.tv2 img{max-width:100%;display:block}
.tv2 a{color:inherit;text-decoration:none}
.tv2 h1,.tv2 h2,.tv2 h3{font-family:var(--titres);color:var(--encre);font-weight:700;line-height:1.04;letter-spacing:-.03em}

.tv2 .conteneur{max-width:var(--conteneur);margin:0 auto;padding:0 28px}
.tv2 .etiquette{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--or-texte);margin-bottom:20px;
}

/* ============================================================
   1. BARRE DE PROGRESSION DE LECTURE
   Détail typiquement "soigné" : on sait toujours où on en est.
   ============================================================ */
.tv2 .progression-lecture{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;
  background:transparent;pointer-events:none;
}
.tv2 .progression-lecture i{
  display:block;height:100%;width:0;background:var(--or);
  transform-origin:left;transition:width .1s linear;
}

/* ============================================================
   2. EN-TÊTE QUI SE TRANSFORME
   Transparent sur le hero sombre, puis clair et compact.
   ============================================================ */
.tv2 .entete{
  position:fixed;top:0;left:0;right:0;z-index:150;
  transition:background .5s var(--douce),backdrop-filter .5s,border-color .5s,height .4s var(--douce);
  border-bottom:1px solid transparent;height:88px;display:flex;align-items:center;
}
.tv2 .entete .conteneur{display:flex;align-items:center;gap:26px;width:100%}
.tv2 .entete .logo{display:flex;align-items:center;gap:10px;font-family:var(--titres);font-size:22px;font-weight:500;color:#fff;transition:color .5s var(--douce)}
.tv2 .entete .logo .studio{color:var(--or-lumineux);font-weight:400;transition:color .5s var(--douce)}
.tv2 .entete .marque-mark{flex:none;display:block}
.tv2 .entete .marque-mark .trait{stroke:#fff;stroke-width:2;fill:none;stroke-linecap:square;transition:stroke .5s var(--douce)}
.tv2 .entete .marque-mark .barre-t{stroke-width:2.6}
.tv2 .entete .marque-mark .accent{fill:var(--or-lumineux)}
.tv2 .entete .nav{margin-left:auto;display:flex;align-items:center;gap:34px}
.tv2 .entete .nav a{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.82);transition:color .5s var(--douce),opacity .25s}
.tv2 .entete .nav a:hover{color:#fff}
/* Le bouton doré doit garder son texte encre : la regle de navigation
   ci-dessus est plus specifique que .btn-or et le repeignait en blanc
   translucide — 2,85:1 sur l'or, illisible. Ici on rend 5,16:1. */
.tv2 .entete .nav a.btn-or,.tv2 .entete.compacte .nav a.btn-or{color:#231A0E}
.tv2 .entete .nav a.btn-or:hover,.tv2 .entete.compacte .nav a.btn-or:hover{color:#fff}

/* bouton du menu mobile — masque au-dessus de 767px */
.tv2 .burger{
  display:none;margin-left:auto;width:42px;height:42px;flex:none;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:none;border:0;cursor:pointer;padding:0;
}
.tv2 .burger span{
  display:block;width:22px;height:2px;background:#fff;border-radius:2px;
  transition:transform .32s var(--sortie),opacity .2s var(--douce),background .5s var(--douce);
}
.tv2 .entete.compacte .burger span{background:var(--encre)}
.tv2 .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tv2 .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.tv2 .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* menu ouvert : l'en-tete passe en version claire pour rester lisible */
.tv2 .entete.menu-ouvert{background:rgba(247,243,236,.97);backdrop-filter:saturate(180%) blur(20px);border-bottom-color:transparent}
.tv2 .entete.menu-ouvert .logo{color:var(--encre)}
.tv2 .entete.menu-ouvert .logo .studio{color:var(--or)}
.tv2 .entete.menu-ouvert .marque-mark .trait{stroke:var(--encre)}
.tv2 .entete.menu-ouvert .marque-mark .accent{fill:var(--or)}
.tv2 .entete.menu-ouvert .burger span{background:var(--encre)}

.tv2 .entete.compacte{
  background:rgba(247,243,236,.82);backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:var(--filet);height:66px;
}
.tv2 .entete.compacte .logo{color:var(--encre)}
.tv2 .entete.compacte .logo .studio{color:var(--or)}
.tv2 .entete.compacte .marque-mark .trait{stroke:var(--encre)}
.tv2 .entete.compacte .marque-mark .accent{fill:var(--or)}
.tv2 .entete.compacte .nav a{color:var(--texte)}
.tv2 .entete.compacte .nav a:hover{color:var(--or-profond)}

/* bouton du header */
.tv2 .btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--texte-ui);
  font-weight:600;font-size:14.5px;padding:11px 22px;border-radius:99px;
  border:1px solid transparent;cursor:pointer;
  transition:background .35s var(--douce),color .35s,border-color .35s,transform .35s var(--sortie);
}
.tv2 .btn-or{background:var(--or);color:#231A0E}
.tv2 .btn-or:hover{background:var(--or-profond);color:#fff;transform:translateY(-2px)}
.tv2 .btn-verre{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(10px)}
.tv2 .btn-verre:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.tv2 .btn-encre{background:var(--encre);color:var(--ivoire-texte)}
.tv2 .btn-encre:hover{background:#000;transform:translateY(-2px)}
.tv2 .groupe-btn{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}

/* ============================================================
   3. HERO PLEIN ÉCRAN
   Une seule idée à l'écran. Le titre apparaît mot par mot.
   ============================================================ */
.tv2 .hero{
  min-height:100svh;background:var(--noir);color:#C7BCAD;
  display:flex;align-items:center;position:relative;overflow:hidden;
  padding:120px 0 100px;
}
.tv2 .hero .halo{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(70px);opacity:.55;
}
.tv2 .hero .halo.a{width:620px;height:620px;right:-160px;top:-180px;background:rgba(169,136,80,.30)}
.tv2 .hero .halo.b{width:460px;height:460px;left:-140px;bottom:-200px;background:rgba(200,165,108,.16)}
.tv2 .hero .conteneur{position:relative;z-index:2}
.tv2 .hero h1{
  color:#fff;font-size:clamp(46px,8.2vw,116px);max-width:14ch;
  letter-spacing:-.045em;line-height:.98;
}
.tv2 .hero h1 em{font-style:normal;color:var(--or-lumineux)}
.tv2 .hero .accroche{font-size:clamp(18px,2vw,22px);color:#C7BCAD;max-width:46ch;margin-top:32px;font-weight:300}
/* inline-block : la boite epouse le texte au lieu de s'etirer sur toute
   la largeur, ce qui la faisait passer sous l'indicateur de defilement. */
.tv2 .hero .note{display:inline-block;max-width:100%;font-size:14px;color:#857A6B;margin-top:30px}

/* apparition mot à mot */
/* padding-bottom + marge negative : la boite de decoupe descend sous la
   ligne de base pour laisser passer les jambages (g, j, p, q) sans
   decaler la mise en page. Le mot part de 130% pour rester cache. */
.tv2 .mot{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.18em;margin-bottom:-.18em}
.tv2 .mot > span{
  display:inline-block;transform:translateY(130%);
  transition:transform 1s var(--sortie);
}
.tv2 .hero.prete .mot > span{transform:none}
.tv2 .fondu{opacity:0;transform:translateY(22px);transition:opacity .9s var(--sortie),transform .9s var(--sortie)}
.tv2 .hero.prete .fondu{opacity:1;transform:none}

/* indicateur de scroll */
.tv2 .indicateur{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#877D72;
}
.tv2 .indicateur .rail{width:1px;height:46px;background:var(--filet-sombre);position:relative;overflow:hidden}
.tv2 .indicateur .rail::after{
  content:"";position:absolute;left:0;top:-46px;width:1px;height:46px;background:var(--or-lumineux);
  animation:descend 2.4s var(--douce) infinite;
}
@keyframes descend{0%{top:-46px}60%,100%{top:46px}}

/* L'indicateur recouvrait la ligne « Devis gratuit… » : sa place est
   desormais reservee sous le contenu, et il se decale a droite plutot
   qu'au centre — la ou aucun texte du hero ne vient jamais, puisque tout
   est aligne a gauche. On le garde donc sur tous les formats. */
/* Centre, comme prevu au depart. Le non-recouvrement ne vient plus d'un
   decalage lateral mais de deux choses : la note du hero est en inline-block
   (sa boite epouse son texte au lieu de s'etirer sur toute la largeur), et
   les respirations du hero se resserrent sur les ecrans peu hauts — voir
   la requete media en fin de fichier. Verifie sur dix formats. */
.tv2 .indicateur{left:50%;right:auto;transform:translateX(-50%);align-items:center}

@media(max-height:660px){
  /* fenetre vraiment basse : on raccourcit au lieu de supprimer, et on
     recupere quelques pixels de marge sous la ligne de mentions */
  .tv2 .indicateur .rail{height:26px}
  .tv2 .indicateur .rail::after{top:-26px;height:26px}
  @keyframes descend{0%{top:-26px}60%,100%{top:26px}}
}
@media(max-width:767px){
  /* Sur telephone l'indicateur repasse dans le flux, centre sous le contenu.
     .hero est un conteneur flex en LIGNE : sans passer en colonne, l'element
     statique se rangeait a cote du texte au lieu d'aller dessous. */
  .tv2 .hero{flex-direction:column;align-items:stretch;justify-content:center}
  .tv2 .indicateur{position:static;left:auto;right:auto;transform:none;
    margin:40px auto 0;align-items:center;align-self:center}
}

/* ============================================================
   4. CHIFFRES QUI SE COMPTENT AU SCROLL
   ============================================================ */
.tv2 .chiffres{background:var(--noir);color:#C7BCAD;padding:0 0 110px}
.tv2 .chiffres .grille{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid var(--filet-sombre);padding-top:56px}
.tv2 .chiffre .valeur{
  font-family:var(--titres);font-size:clamp(48px,6vw,82px);font-weight:700;
  color:#fff;letter-spacing:-.04em;line-height:1;font-feature-settings:"tnum" 1;
}
.tv2 .chiffre .valeur .suffixe{color:var(--or-lumineux)}
.tv2 .chiffre .libelle{font-size:15px;color:#857A6B;margin-top:12px;max-width:24ch}

/* ============================================================
   5. SECTION COLLANTE — le visuel reste, le texte défile
   C'est LE procédé qui fait "beaucoup de travail" à l'écran.
   ============================================================ */
.tv2 .scrollytelling{background:var(--ivoire);padding:120px 0}
.tv2 .scrolly-grille{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.tv2 .scrolly-visuel{align-self:stretch}
.tv2 .scrolly-cadre{
  position:sticky;top:120px;width:100%;height:min(74vh,620px);
  border-radius:20px;overflow:hidden;
  background:var(--sable);border:1px solid var(--filet);
}
/* La carte sortante s'efface vite, l'entrante arrive juste après :
   sans ce décalage, les deux prix se superposent en filigrane. */
.tv2 .scrolly-carte{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:44px;
  opacity:0;transform:scale(.97);pointer-events:none;
  transition:opacity .22s var(--douce),transform .22s var(--douce);
}
.tv2 .scrolly-carte.active{
  opacity:1;transform:none;pointer-events:auto;
  transition:opacity .5s var(--douce) .16s,transform .55s var(--sortie) .16s;
}
.tv2 .scrolly-carte .rond{width:132px;height:132px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.tv2 .scrolly-carte .nom{font-family:var(--titres);font-size:30px;font-weight:700;color:var(--encre);letter-spacing:-.02em}
.tv2 .scrolly-carte .prix{font-family:var(--titres);font-size:52px;font-weight:700;color:var(--or-profond);letter-spacing:-.03em}
.tv2 .scrolly-carte .sous{font-size:14.5px;color:var(--discret-texte)}

.tv2 .scrolly-etapes{display:flex;flex-direction:column;gap:0}
.tv2 .scrolly-etape{
  padding:96px 0;min-height:330px;display:flex;flex-direction:column;justify-content:center;
  border-bottom:1px solid var(--filet);
  opacity:.32;transition:opacity .5s var(--douce);
}
.tv2 .scrolly-etape.active{opacity:1}
.tv2 .scrolly-etape:first-child{padding-top:10px}
.tv2 .scrolly-etape h3{font-size:clamp(30px,3.4vw,44px);margin-bottom:16px}
.tv2 .scrolly-etape p{font-size:17.5px;max-width:44ch}
.tv2 .scrolly-etape .lien{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-weight:600;font-size:15px;color:var(--or-texte);
}
.tv2 .scrolly-etape .lien::after{content:"→";transition:transform .3s var(--sortie)}
.tv2 .scrolly-etape .lien:hover::after{transform:translateX(5px)}

/* ============================================================
   6. PROCESS — la ligne se remplit au scroll
   ============================================================ */
.tv2 .process{background:var(--surface);padding:120px 0}
.tv2 .process .duo-process{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.tv2 .process .colonne-titre{position:sticky;top:130px}
.tv2 .process .piste{position:relative;padding-left:52px}
.tv2 .process .rail{position:absolute;left:14px;top:8px;bottom:8px;width:2px;background:var(--filet)}
.tv2 .process .rail i{display:block;width:100%;height:0;background:var(--or);transition:height .15s linear}
.tv2 .process .etape{position:relative;padding-bottom:56px}
.tv2 .process .etape:last-child{padding-bottom:0}
.tv2 .process .puce{
  position:absolute;left:-52px;top:2px;width:30px;height:30px;border-radius:50%;
  background:var(--surface);border:2px solid var(--filet);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--discret-texte);
  transition:border-color .45s var(--douce),background .45s var(--douce),color .45s var(--douce),transform .45s var(--sortie);
}
.tv2 .process .etape.active .puce{border-color:var(--or);background:var(--or);color:#231A0E;transform:scale(1.12)}
.tv2 .process .etape h3{font-size:24px;margin-bottom:10px;transition:color .4s}
.tv2 .process .etape p{max-width:52ch;transition:opacity .4s}
.tv2 .process .etape:not(.active) p{opacity:.55}

/* ============================================================
   7. RÉALISATIONS — grand format, révélation au scroll
   ============================================================ */
.tv2 .projets{background:var(--ivoire);padding:120px 0}
.tv2 .projet{
  position:relative;border-radius:20px;overflow:hidden;margin-bottom:28px;
  background:var(--noir);min-height:440px;display:flex;align-items:flex-end;
  transition:transform .6s var(--sortie);
}
.tv2 .projet:hover{transform:translateY(-6px)}
.tv2 .projet .fond{position:absolute;inset:0;transition:transform 1.1s var(--sortie)}
.tv2 .projet:hover .fond{transform:scale(1.04)}
/* Les vraies captures des deux projets. object-position:top pour montrer
   le haut des pages (le hero du site), pas leur milieu. */
.tv2 .projet .fond img.capture,
.tv2 .projet-plein .bandeau-visuel .fond img.capture{
  width:100%;height:100%;object-fit:cover;object-position:top center;
}
.tv2 .projet .fond{overflow:hidden}
.tv2 .projet:hover .fond{transform:scale(1.045)}

/* Lien invisible qui couvre toute la carte : on clique n'importe ou.
   Le libelle « Visiter … » reste visible et au-dessus de lui. */
.tv2 .lien-couvrant{position:absolute;inset:0;z-index:3}
.tv2 .visiter{
  position:relative;z-index:4;display:inline-block;margin-top:16px;
  font-weight:600;font-size:14.5px;color:var(--or-lumineux);pointer-events:none;
}
.tv2 .projet-plein .bandeau-visuel{position:relative}

/* Les captures des sites sont claires : le voile doit etre plus dense
   qu'avec les degrades de remplacement, sinon le texte devient illisible. */
.tv2 .projet .voile{position:absolute;inset:0;background:linear-gradient(rgba(23,18,16,.18) 0%,rgba(23,18,16,.38) 34%,rgba(23,18,16,.80) 66%,rgba(23,18,16,.95) 100%)}
.tv2 .projet .contenu{position:relative;z-index:2;padding:46px;color:#fff;width:100%;display:flex;flex-direction:column;align-items:flex-start}
.tv2 .projet .contenu .badge{order:1}
.tv2 .projet .contenu h3{order:2}
.tv2 .projet .contenu p{order:3}
.tv2 .projet .contenu .visiter{order:4}
.tv2 .projet .badge{
  display:inline-block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);
  padding:6px 14px;border-radius:99px;margin-bottom:18px;
}
.tv2 .projet h3{color:#fff;font-size:clamp(30px,3.6vw,46px);margin-bottom:12px}
.tv2 .projet p{color:#C7BCAD;max-width:52ch;font-size:16.5px}

/* ============================================================
   8. CTA FINAL
   ============================================================ */
.tv2 .final{background:var(--noir);color:#C7BCAD;padding:140px 0;text-align:center;position:relative;overflow:hidden}
.tv2 .final .halo{position:absolute;width:640px;height:640px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(169,136,80,.16);filter:blur(80px)}
.tv2 .final .conteneur{position:relative;z-index:2}
.tv2 .final h2{color:#fff;font-size:clamp(38px,6vw,80px);max-width:16ch;margin:0 auto;letter-spacing:-.04em}
.tv2 .final p{margin:26px auto 0;max-width:46ch;font-size:18px}
.tv2 .final .groupe-btn{justify-content:center}

/* ============================================================
   8 bis. HERO DE PAGE INTÉRIEURE
   Plus court que l'accueil : on n'est plus en vitrine, on lit.
   ============================================================ */
.tv2 .hero.page{min-height:auto;padding:180px 0 90px}
.tv2 .hero.page h1{font-size:clamp(40px,6.4vw,84px);max-width:16ch}
.tv2 .hero.page .accroche{max-width:56ch}

/* ============================================================
   10. OFFRES EN GRANDES LIGNES (page offres)
   ============================================================ */
.tv2 .offres-lignes{border-top:1px solid var(--filet)}
.tv2 .offre-ligne{
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
  padding:52px 0;border-bottom:1px solid var(--filet);
  transition:padding-left .5s var(--sortie);
}
.tv2 .offre-ligne:hover{padding-left:16px}
.tv2 .offre-ligne .cible{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--or-texte);margin-bottom:12px}
.tv2 .offre-ligne h3,.tv2 .offre-ligne h2{font-size:clamp(28px,3.6vw,46px);margin-bottom:14px}
.tv2 .offre-ligne p{max-width:56ch;font-size:17px}
.tv2 .offre-ligne .droite{text-align:right;white-space:nowrap}
.tv2 .offre-ligne .prix{font-family:var(--titres);font-size:clamp(34px,4vw,56px);font-weight:700;color:var(--encre);letter-spacing:-.03em;line-height:1}
.tv2 .offre-ligne .prix small{display:block;font-family:var(--texte-ui);font-size:13.5px;font-weight:400;color:var(--discret-texte);margin-top:8px;letter-spacing:0}
/* regle generale : .puces sert aussi dans les realisations, ou le HTML
   n'a pas d'espace entre les <span> — sans flex+gap, les libelles se
   collaient (« Creation de A a ZWooCommerce »). */
.tv2 .puces{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tv2 .puce{font-size:13px;background:var(--voile-or);color:var(--or-texte-fonce);padding:6px 13px;border-radius:99px}
.tv2 .offre-ligne.vedette{background:linear-gradient(90deg,rgba(240,231,213,.5),transparent 70%);padding-left:24px;margin-left:-24px}

/* ---- tableau des options ---- */
.tv2 .options{width:100%;border-collapse:collapse;margin-top:34px}
.tv2 .options tr{border-bottom:1px solid var(--filet);transition:background .3s}
.tv2 .options tr:hover{background:var(--voile-or)}
.tv2 .options td{padding:18px 4px;font-size:16.5px;color:var(--encre)}
.tv2 .options td:last-child{text-align:right;font-family:var(--titres);font-weight:700;color:var(--or-profond);white-space:nowrap}

/* ---- inclus ---- */
.tv2 .inclus{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.tv2 .inclus span{
  background:var(--voile-or);color:var(--or-texte-fonce);font-size:14.5px;font-weight:500;
  padding:15px 18px;border-radius:10px;
}

/* ---- FAQ ---- */
.tv2 .faq{margin-top:20px;border-top:1px solid var(--filet)}
.tv2 .faq details{border-bottom:1px solid var(--filet)}
.tv2 .faq summary{
  list-style:none;cursor:pointer;padding:26px 0;font-family:var(--titres);
  font-size:20px;font-weight:500;color:var(--encre);display:flex;
  align-items:center;justify-content:space-between;gap:20px;
}
.tv2 .faq summary::-webkit-details-marker{display:none}
.tv2 .faq summary::after{
  content:"+";font-size:26px;color:var(--or-texte);flex:none;
  transition:transform .4s var(--sortie);font-weight:400;
}
.tv2 .faq details[open] summary::after{transform:rotate(45deg)}
.tv2 .faq .reponse{padding:0 0 26px;max-width:70ch;color:var(--texte)}

/* ============================================================
   11. RÉALISATION PLEIN FORMAT (page réalisations)
   ============================================================ */
.tv2 .projet-plein{padding:0;margin-bottom:0}
.tv2 .projet-plein .bandeau-visuel{
  height:min(66vh,560px);border-radius:20px;overflow:hidden;position:relative;
  display:flex;align-items:flex-end;
}
/* Le .fond du grand format n'avait aucune regle de position : l'image
   ne remplissait pas son cadre et flottait au milieu du bandeau. */
.tv2 .projet-plein .bandeau-visuel .fond{position:absolute;inset:0;overflow:hidden}
.tv2 .projet-plein .voile{position:absolute;inset:0;background:linear-gradient(rgba(23,18,16,.20) 0%,rgba(23,18,16,.42) 30%,rgba(23,18,16,.82) 66%,rgba(23,18,16,.96) 100%)}
.tv2 .projet-plein .contenu-bas{position:relative;z-index:2;padding:48px;color:#fff;width:100%;
  text-shadow:0 1px 18px rgba(23,18,16,.55)}
.tv2 .projet-plein .infos{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:52px 0 90px;align-items:start}
.tv2 .projet-plein .infos h3,.tv2 .projet-plein .infos h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:18px}
.tv2 .projet-plein .perimetre{border-left:2px solid var(--or);padding-left:22px;margin-top:26px}
.tv2 .projet-plein .perimetre strong{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--or-texte);margin-bottom:8px}
.tv2 .lien-externe{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  font-weight:600;font-size:16px;color:var(--encre);
  border-bottom:2px solid var(--or);padding-bottom:4px;
  transition:gap .3s var(--sortie);
}
.tv2 .lien-externe:hover{gap:15px}

/* ============================================================
   12. PARCOURS COLLANT (page à propos)
   ============================================================ */
.tv2 .parcours{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start;margin-top:60px}
.tv2 .parcours .colonne-fixe{position:sticky;top:130px}
.tv2 .parcours .portrait{
  width:100%;aspect-ratio:4/5;border-radius:20px;overflow:hidden;
  background:var(--sable);border:1px solid var(--filet);
}
.tv2 .parcours .portrait img{width:100%;height:100%;object-fit:cover;display:block}
.tv2 .jalon{padding:44px 0;border-bottom:1px solid var(--filet)}
.tv2 .jalon:first-child{padding-top:0}
.tv2 .jalon .titre-jalon{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--or-texte);margin-bottom:12px}
.tv2 .jalon h3{font-size:26px;margin-bottom:12px}
.tv2 .jalon p{max-width:52ch}

/* ---- valeurs ---- */
.tv2 .valeurs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.tv2 .valeur-carte{
  background:var(--surface);border:1px solid var(--filet);border-radius:16px;padding:36px 30px;
  transition:transform .5s var(--sortie),box-shadow .5s var(--douce);
}
.tv2 .valeur-carte:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(29,24,20,.07)}
.tv2 .valeur-carte .num{font-family:var(--titres);font-size:15px;font-weight:700;color:var(--or-texte);margin-bottom:16px;display:block}
.tv2 .valeur-carte h3{font-size:22px;margin-bottom:12px}
.tv2 .valeur-carte p{font-size:15.5px}

/* ============================================================
   13. FORMULAIRE (page contact)
   ============================================================ */
.tv2 .form-duo{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:start}
.tv2 .champ{margin-bottom:22px}
.tv2 .champ label{display:block;font-size:13.5px;font-weight:600;color:var(--encre);margin-bottom:9px;letter-spacing:.02em}
.tv2 .champ input,.tv2 .champ select,.tv2 .champ textarea{
  width:100%;font-family:var(--texte-ui);font-size:16.5px;color:var(--encre);
  background:var(--surface);border:1px solid var(--filet);border-radius:12px;
  padding:16px 18px;transition:border-color .3s,box-shadow .3s,background .3s;
}
.tv2 .champ textarea{min-height:150px;resize:vertical}
.tv2 .champ input:focus,.tv2 .champ select:focus,.tv2 .champ textarea:focus{
  outline:none;border-color:var(--or);box-shadow:0 0 0 4px rgba(169,136,80,.13);background:#fff;
}
.tv2 .mention{font-size:13.5px;color:var(--discret-texte);margin-top:16px}
.tv2 .bloc-info{background:var(--surface);border:1px solid var(--filet);border-radius:16px;padding:30px;margin-bottom:18px}
.tv2 .bloc-info strong{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--or-texte);margin-bottom:12px}
.tv2 .bloc-info a:not(.btn),.tv2 .bloc-info span{font-size:17px;color:var(--encre);display:block;margin-bottom:6px}
.tv2 .bloc-info a:not(.btn):hover{color:var(--or-profond)}
/* Le bloc « Réserver un créneau » a un fond doré pose en ligne : le libelle
   doit y etre plus fonce que sur fond ivoire pour rester a 4,5:1. */
.tv2 .bloc-info[style*="voile-or"] strong{color:var(--or-texte-fonce)}

/* ============================================================
   14. PIED DE PAGE v2
   ============================================================ */
.tv2 .pied{background:var(--noir);color:#A99C8D;padding:90px 0 0}
.tv2 .pied .logo-pied{display:flex;align-items:center;gap:12px;font-family:var(--titres);font-size:30px;font-weight:500;color:#fff}
.tv2 .pied .logo-pied .studio{color:var(--or-lumineux);font-weight:400}
.tv2 .pied .logo-pied .marque-mark .trait{stroke:#fff;stroke-width:2;fill:none;stroke-linecap:square}
.tv2 .pied .logo-pied .marque-mark .barre-t{stroke-width:2.6}
.tv2 .pied .logo-pied .marque-mark .accent{fill:var(--or-lumineux)}
.tv2 .pied .colonnes{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding:44px 0;border-top:1px solid var(--filet-sombre);margin-top:38px}
.tv2 .pied h4{color:#fff;font-family:var(--texte-ui);font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:600;margin-bottom:16px}
.tv2 .pied a{display:block;margin-bottom:10px;font-size:15px;color:#A99C8D;transition:color .3s,transform .3s var(--sortie)}
.tv2 .pied a:hover{color:var(--or-lumineux);transform:translateX(3px)}
.tv2 .pied p{font-size:15px}
.tv2 .pied .legal{border-top:1px solid var(--filet-sombre);padding:22px 0;font-size:12.5px;color:#6F6459;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ============================================================
   9. RÉVÉLATION GÉNÉRIQUE AU SCROLL
   ============================================================ */
.tv2 .rev{opacity:0;transform:translateY(30px);transition:opacity .85s var(--sortie),transform .85s var(--sortie)}
.tv2 .rev.vu{opacity:1;transform:none}
.tv2 .rev.r1{transition-delay:.09s}
.tv2 .rev.r2{transition-delay:.18s}
.tv2 .rev.r3{transition-delay:.27s}

/* ============================================================
   ACCESSIBILITÉ — tout se coupe si la personne le demande
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .tv2 .rev,.tv2 .rev.vu{opacity:1;transform:none;transition:none}
  .tv2 .mot > span{transform:none;transition:none}
  .tv2 .fondu{opacity:1;transform:none;transition:none}
  .tv2 .scrolly-carte{transition:none}
  .tv2 .indicateur .rail::after{animation:none}
  .tv2 .btn:hover,.tv2 .projet:hover,.tv2 .projet:hover .fond{transform:none}
  .tv2 .scrolly-etape{opacity:1}
  .tv2 .process .etape:not(.active) p{opacity:1}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .tv2 .process .duo-process{grid-template-columns:1fr;gap:36px}
  .tv2 .process .colonne-titre{position:relative;top:0}
  /* On garde le procede en une colonne : le visuel se colle en haut et
     change au fil des offres, au lieu de disparaitre apres le premier ecran. */
  .tv2 .scrolly-grille{display:block}
  /* fond opaque pleine largeur : sans lui, le texte des offres defile
     visiblement derriere la carte collee. */
  .tv2 .scrolly-visuel{
    position:sticky;top:64px;z-index:3;height:auto;
    background:var(--ivoire);padding:12px 0 16px;margin-bottom:6px;
  }
  .tv2 .scrolly-cadre{position:relative;top:0;height:228px;box-shadow:0 12px 30px rgba(23,18,16,.10)}
  .tv2 .scrolly-carte{padding:24px;gap:10px}
  .tv2 .scrolly-carte .rond{width:74px;height:74px}
  .tv2 .scrolly-carte .nom{font-size:21px}
  .tv2 .scrolly-carte .prix{font-size:34px}
  .tv2 .scrolly-etape{padding:38px 0;min-height:0;display:block}
  .tv2 .chiffres .grille{grid-template-columns:1fr;gap:44px}
}
@media(max-width:980px){
  .tv2 .offre-ligne{grid-template-columns:1fr;gap:22px}
  .tv2 .offre-ligne .droite{text-align:left}
  .tv2 .projet-plein .infos{grid-template-columns:1fr;gap:26px}
  .tv2 .parcours{grid-template-columns:1fr;gap:40px}
  .tv2 .parcours .colonne-fixe{position:relative;top:0}
  .tv2 .parcours .portrait{max-width:420px}
  .tv2 .valeurs{grid-template-columns:1fr}
  .tv2 .form-duo{grid-template-columns:1fr;gap:44px}
  .tv2 .inclus{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
  /* Le menu passait simplement en display:none : plus aucune navigation
     sur telephone. Il se replie maintenant derriere un bouton. */
  .tv2 .entete .conteneur{gap:14px}
  .tv2 .burger{display:flex}
  .tv2 .entete .nav{
    position:fixed;inset:0 0 auto 0;top:var(--h-entete,66px);
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(247,243,236,.97);backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--filet);
    padding:8px 24px 22px;margin-left:0;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .28s var(--douce),transform .28s var(--sortie);
  }
  .tv2 .entete .nav.ouvert{transform:none;opacity:1;pointer-events:auto}
  .tv2 .entete .nav a{color:var(--texte)!important;font-size:17px;padding:14px 0;border-bottom:1px solid var(--filet)}
  .tv2 .entete .nav a.btn{margin-top:16px;border-bottom:0;justify-content:center;padding:14px 22px;color:#231A0E!important}
  .tv2 .entete .nav a:last-child{border-bottom:0}
  .tv2 .hero{padding:110px 0 90px;min-height:auto}
  .tv2 .hero.page{padding:120px 0 64px}
  .tv2 .inclus{grid-template-columns:1fr}
  .tv2 .projet-plein .bandeau-visuel{height:340px}
  .tv2 .projet-plein .contenu-bas{padding:28px}
  .tv2 .pied .colonnes{grid-template-columns:1fr}
  .tv2 .hero h1{font-size:clamp(40px,11vw,60px)}
  .tv2 .scrollytelling,.tv2 .process,.tv2 .projets{padding:76px 0}
  .tv2 .final{padding:90px 0}
  .tv2 .projet{min-height:340px}
  .tv2 .projet .contenu{padding:30px}
  .tv2 .process .piste{padding-left:44px}
  .tv2 .process .puce{left:-44px}
}


/* ============================================================
   ADAPTATIONS WORDPRESS / DIVI
   ------------------------------------------------------------
   Divi pose overflow:hidden sur ses sections, rangees et colonnes.
   Or position:sticky cesse de fonctionner des qu'un seul ancetre
   a un overflow different de visible : la section collante des
   offres restait donc figee. On ne libere que les conteneurs qui
   contiennent reellement du contenu v2, grace a :has().
   ============================================================ */
.et_pb_section:has(.tv2),
.et_pb_row:has(.tv2),
.et_pb_column:has(.tv2),
.et_pb_module:has(.tv2),
.et_pb_code:has(.tv2),
.et-l:has(.tv2){overflow:visible!important}

/* Divi contraint la largeur de ses rangees : nos sections pleine
   largeur doivent pouvoir aller au bord. */
.et_pb_row:has(> .et_pb_column > .et_pb_module > .tv2){width:100%;max-width:100%;padding:0}
.et_pb_section:has(.tv2){padding:0}


/* ============================================================
   FORMULAIRE DE CONTACT — retour d'envoi et anti-robot
   ============================================================ */

/* Champ pot de miel : invisible pour un visiteur, y compris au lecteur
   d'ecran (aria-hidden) et au clavier (tabindex -1), mais rempli par la
   plupart des robots. On evite display:none, que certains detectent. */
.tv2 .pot-de-miel{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.tv2 .msg-envoi{
  padding:15px 20px;border-radius:12px;margin-bottom:24px;
  font-size:15.5px;line-height:1.55;border:1px solid;
}
.tv2 .msg-envoi[hidden]{display:none}
.tv2 .msg-envoi.ok{background:#EAF3EA;border-color:#9BBE9B;color:#2C4A2C}
.tv2 .msg-envoi.souci{background:#FBEDE9;border-color:#D8A38F;color:#7A3A24}


/* ============================================================
   ECRANS D'ORDINATEUR PORTABLE PEU HAUTS (1366x768, 1440x760…)
   ------------------------------------------------------------
   Le hero est cale sur 100svh, mais son contenu — titre geant,
   accroche, boutons, mentions — mesurait a lui seul ~850 px avec
   les respirations d'origine. Sur ces ecrans il debordait, et
   l'indicateur de defilement tombait sous la ligne de flottaison.
   On resserre sans toucher aux grands ecrans.
   ============================================================ */
@media (min-width:768px) and (max-height:880px){
  .tv2 .hero{padding:92px 0 64px}
  .tv2 .hero h1{font-size:clamp(40px,5.6vw,72px)}
  .tv2 .hero .accroche{margin-top:20px;font-size:clamp(17px,1.7vw,19px)}
  .tv2 .hero .groupe-btn{margin-top:26px}
  .tv2 .hero .note{margin-top:20px}
  .tv2 .indicateur{bottom:20px}
}


/* ============================================================
   FENETRE TRES BASSE (moins de 660 px de haut)
   ------------------------------------------------------------
   Placee en fin de fichier a dessein : ces valeurs doivent passer
   apres la requete max-height:880px, sinon elles sont ecrasees et
   la marge sous la ligne de mentions retombe a 4 px.
   ============================================================ */
@media (min-width:768px) and (max-height:700px){
  .tv2 .indicateur{bottom:14px}
  .tv2 .hero .note{margin-top:12px}
  /* La marge basse est calee sur la hauteur de l'indicateur (~54 px en
     version courte) plutot que reglee a l'oeil : la separation est garantie
     par construction, pas par un calcul qui tient jusqu'au prochain ecran. */
  .tv2 .hero{padding:84px 0 100px}
}


/* ============================================================
   FOCUS AU CLAVIER
   ------------------------------------------------------------
   :focus-visible et non :focus — l'anneau n'apparait qu'a la
   navigation clavier, jamais au clic a la souris. Sans cette
   regle, un lien qui couvre une carte n'a aucun indicateur et
   la personne qui tabule perd sa position dans la page.
   ============================================================ */
.tv2 a:focus-visible,
.tv2 button:focus-visible,
.tv2 input:focus-visible,
.tv2 select:focus-visible,
.tv2 textarea:focus-visible,
.tv2 summary:focus-visible{
  outline:2px solid var(--or);
  outline-offset:3px;
  border-radius:4px;
}
/* Sur les blocs sombres, l'or n'a pas assez de contraste : on passe au blanc. */
.tv2 .hero a:focus-visible,
.tv2 .entete a:focus-visible,
.tv2 .entete button:focus-visible,
.tv2 .pied a:focus-visible,
.tv2 .final a:focus-visible,
.tv2 .chiffres a:focus-visible,
.tv2 .projet a:focus-visible,
.tv2 .projet-plein .bandeau-visuel a:focus-visible{
  outline-color:#fff;
}
/* Le lien invisible qui couvre une carte : son anneau epouse la carte. */
.tv2 .lien-couvrant:focus-visible{outline-offset:-4px;border-radius:18px}