/* ==========================================================================
   JMD Conseil, V2 (brouillon du 24/10/2026).
   Chargee apres styles.css sur toutes les pages : elle redessine la nav, le
   pied de page et le formulaire partout, et porte les composants de l'accueil
   et des trois nouvelles pages (prefixe v2-).
   Charte du 09/10/2026 inchangee. Plan : _textes/plan-refonte-v2-2026-10-24.md.
   Mouvement : trois moments seulement (titre du hero, miroir, methode).
   ========================================================================== */

:root{
  --cream:#F5EEDC;
  --rule:#E4DCCD;
  --rule-strong:#CFC3AE;
  --v2-maxw:1240px;
  --gut:clamp(18px,4vw,40px);
}

.v2-wrap{max-width:var(--v2-maxw);margin:0 auto;padding:0 var(--gut);position:relative;z-index:2}
.v2-band{padding:clamp(72px,9vw,132px) 0;position:relative}
.v2-cream{background:var(--cream)}
.v2-ink{background:var(--espresso);color:var(--cream-on-dark)}

/* Typographie V2 : titres serres, une seule couleur d'accent par titre. */
.v2-eyebrow{display:flex;align-items:center;gap:12px;font-size:.72rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--taupe)}
.v2-eyebrow::before{content:"";width:28px;height:1px;background:var(--wine)}
.v2-ink .v2-eyebrow{color:var(--gold-soft)}
.v2-ink .v2-eyebrow::before{background:var(--gold-soft)}
.v2-num{font-family:var(--font-display);font-weight:500;color:var(--wine);font-variant-numeric:lining-nums}
.v2-ink .v2-num{color:var(--gold-soft)}

.v2-h2{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.06;
  letter-spacing:-.018em;color:var(--ink);max-width:18ch;margin-top:18px}
.v2-ink .v2-h2{color:var(--cream-on-dark)}
.v2-h2 .acc{color:var(--wine)}
.v2-ink .v2-h2 .acc{color:var(--gold-soft)}
.v2-lede{font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.7;color:var(--taupe);max-width:56ch;margin-top:22px}
.v2-ink .v2-lede{color:var(--cream-soft)}
.v2-tete{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px 64px;align-items:end;
  margin-bottom:clamp(40px,5vw,72px)}
.v2-tete .v2-lede{margin-top:0}
@media(max-width:900px){.v2-tete{grid-template-columns:1fr}}

.v2-lien{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.9rem;color:var(--wine);
  border-bottom:1px solid currentColor;padding-bottom:3px;transition:gap .3s var(--ease)}
.v2-lien::after{content:"→"}
.v2-lien:hover{gap:16px}
.v2-ink .v2-lien{color:var(--gold-soft)}

.v2-tag{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe);border:1px solid var(--rule-strong);padding:5px 10px;border-radius:2px}
.v2-tag.vert::before{content:"";width:7px;height:7px;border-radius:50%;background:#47734A}
.v2-ink .v2-tag{color:var(--cream-soft);border-color:rgba(245,238,220,.25)}

.btn-wine{background:var(--wine);color:#fff}
.btn-wine:hover{background:var(--wine-deep);transform:translateY(-2px)}

/* --------------------------------------------------------------------------
   Nav : trait qui glisse sous la rubrique (principe Tubelight, sans lueur).
   -------------------------------------------------------------------------- */
.nav.scrolled{background:rgba(255,255,255,.9)}
.nav-links{position:relative}
.nav-links.a-trait a::after{display:none}
.nav-ind{position:absolute;bottom:0;left:0;height:1px;width:0;background:var(--wine);opacity:0;pointer-events:none;
  transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s}
.nav .btn-gold{background:var(--wine);color:#fff}
.nav .btn-gold:hover{background:var(--wine-deep)}

/* --------------------------------------------------------------------------
   I. Hero
   -------------------------------------------------------------------------- */
.v2-hero{padding:clamp(112px,11vw,136px) 0 0;position:relative;overflow:hidden}
.v2-hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,4.5vw,4.1rem);line-height:1.04;
  letter-spacing:-.025em;color:var(--ink);margin-top:22px;text-wrap:balance}
.v2-hero h1 .acc{color:var(--wine)}
/* Le masque de chaque ligne deborde sous la ligne de base : a .06em, il coupait les
   jambages du Playfair (p, q, g), constate sur capture le 24/10/2026. */
.v2-hero h1 .l{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.16em}
.v2-hero h1 .l>span{display:block;animation:v2-monte 1s var(--ease) both}
.v2-hero h1 .l:nth-child(2)>span{animation-delay:.08s}
.v2-hero h1 .l:nth-child(3)>span{animation-delay:.16s}
@keyframes v2-monte{from{transform:translateY(105%)}to{transform:none}}

.v2-hero-bas{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:48px;align-items:start;margin-top:clamp(28px,4vw,48px)}
.v2-hero-txt p{font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.7;color:var(--taupe);max-width:40ch}
.v2-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.v2-hero-tel{margin-top:22px;font-size:.86rem;color:var(--taupe)}
.v2-hero-tel a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--rule-strong)}

/* Vitrine du hero : capture ordinateur et capture telephone, toutes deux reelles. */
.v2-vitrine{position:relative;padding:0 0 48px 56px;animation:v2-fondu 1.2s .25s var(--ease) both}
@keyframes v2-fondu{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.v2-navigateur{background:#fff;border:1px solid var(--rule-strong);border-radius:10px;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(23,17,13,.35)}
.v2-navigateur .barre{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--rule);
  font-size:.7rem;color:var(--taupe);letter-spacing:.02em;background:#FCFAF6}
.v2-navigateur .barre::before{content:"";width:9px;height:9px;border:1px solid var(--rule-strong);border-radius:50%}
.v2-navigateur img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.v2-tel{position:absolute;width:clamp(120px,15vw,176px);border:7px solid var(--espresso);border-radius:24px;overflow:hidden;
  background:var(--espresso);box-shadow:0 26px 50px -20px rgba(23,17,13,.55)}
.v2-tel img{width:100%;height:auto;aspect-ratio:9/19.5;object-fit:cover;object-position:top}
.v2-vitrine .v2-tel{left:0;bottom:0}
.v2-legende{font-size:.72rem;color:var(--taupe);letter-spacing:.04em;margin-top:14px;text-align:right}
.v2-legende a{border-bottom:1px solid var(--rule-strong)}

/* Les trois familles, en index numerote : ni cartes ni icones. */
.v2-familles{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule-strong);
  margin-top:clamp(48px,6vw,80px)}
.v2-famille{position:relative;display:grid;grid-template-columns:2.6rem 1fr;gap:6px 14px;padding:30px 28px 34px;
  border-right:1px solid var(--rule);transition:background .35s var(--ease)}
.v2-famille:first-child{padding-left:0}
.v2-famille:last-child{border-right:0}
.v2-famille .v2-num{font-size:1.9rem;line-height:1;grid-row:span 3}
.v2-familles.deux{grid-template-columns:repeat(2,1fr)}
.v2-famille h2,.v2-famille h3{font-family:var(--font-display);font-weight:600;font-size:1.35rem;line-height:1.2;color:var(--ink)}
.v2-famille p{font-size:.9rem;line-height:1.6;color:var(--taupe)}
.v2-famille .prix{font-weight:600;color:var(--ink);font-size:.86rem;display:flex;justify-content:space-between;gap:12px}
.v2-famille .prix::after{content:"→";color:var(--wine);transition:transform .3s var(--ease)}
.v2-famille::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--wine);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.v2-famille:hover::before,.v2-famille:focus-visible::before{transform:scaleX(1)}
.v2-famille:hover .prix::after{transform:translateX(5px)}
.v2-famille:first-child::before{left:0}

/* Sur telephone, les trois lignes du titre coulent librement : forcees, elles
   laissaient « metier » seul sur sa ligne (capture du 24/10/2026). */
@media(max-width:640px){
  .v2-hero h1{text-wrap:pretty}
  .v2-hero h1 .l,.v2-hero h1 .l>span{display:inline;animation:none}
}
/* Premier ecran telephone (retour du 24/10/2026) : la capture d'un site livre doit
   apparaitre sans defiler. Titre plus compact, boutons cote a cote, et la ligne
   « appelez le » cede sa place : la nav et le bouton flottant portent deja l'appel. */
@media(max-width:640px){
  .v2-hero{padding-top:96px}
  .v2-hero h1{font-size:1.95rem;line-height:1.08;margin-top:14px}
  .v2-hero-bas{margin-top:16px;gap:28px}
  .v2-hero-txt p{font-size:.98rem;line-height:1.6}
  .v2-hero-cta{margin-top:18px;gap:8px;flex-wrap:nowrap}
  .v2-hero-cta .btn{padding:12px 14px;font-size:.84rem;flex:1;justify-content:center}
  .v2-hero-tel{display:none}
  .v2-vitrine{padding:0 0 30px 34px}
  .v2-vitrine .v2-tel{width:104px;border-width:5px;border-radius:16px}
  .v2-vitrine .v2-legende{padding-left:80px}
}
@media(max-width:960px){
  .v2-hero-bas{grid-template-columns:1fr}
  .v2-vitrine{padding-left:40px;max-width:640px}
  .v2-familles,.v2-familles.deux{grid-template-columns:1fr}
  .v2-famille{padding:24px 0;border-right:0;border-bottom:1px solid var(--rule)}
}

/* --------------------------------------------------------------------------
   II. Le miroir : dans la rue, sur internet.
   -------------------------------------------------------------------------- */
.v2-miroir{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 270px;gap:0 44px;align-items:start}
.v2-rue{position:relative}
.v2-rue img{width:100%;height:auto;aspect-ratio:1/1.02;object-fit:cover;object-position:52% 60%;border-radius:4px}
.v2-miroir .v2-lignes{margin-top:56px}
.v2-cote{display:block;font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--wine);margin-bottom:14px}
.v2-credit{font-size:.66rem;color:var(--taupe);margin-top:10px;line-height:1.5}
.v2-credit a{border-bottom:1px solid var(--rule-strong)}

.v2-lignes{list-style:none;position:relative}
.v2-lignes li{position:relative;padding:20px 0;border-top:1px solid var(--rule-strong)}
.v2-lignes li:last-child{border-bottom:1px solid var(--rule-strong)}
.v2-lignes h3{font-family:var(--font-display);font-weight:600;font-size:1.18rem;color:var(--ink);display:flex;gap:12px;align-items:baseline}
.v2-lignes h3 .v2-num{font-size:.9rem}
.v2-lignes .paire{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px;font-size:.84rem;line-height:1.55;color:var(--taupe)}
.v2-lignes .paire b{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:3px;font-weight:600}
/* Le fil qui relie la ligne a la photo et au telephone : se trace a l'entree. */
.v2-lignes li::before,.v2-lignes li::after{content:"";position:absolute;top:34px;height:1px;width:40px;background:var(--wine);
  transform:scaleX(0);transition:transform .7s var(--ease)}
.v2-lignes li::before{right:100%;transform-origin:right}
.v2-lignes li::after{left:100%;transform-origin:left}
.v2-miroir.trace .v2-lignes li::before,.v2-miroir.trace .v2-lignes li::after{transform:scaleX(1)}
.v2-miroir.trace .v2-lignes li:nth-child(2)::before,.v2-miroir.trace .v2-lignes li:nth-child(2)::after{transition-delay:.12s}
.v2-miroir.trace .v2-lignes li:nth-child(3)::before,.v2-miroir.trace .v2-lignes li:nth-child(3)::after{transition-delay:.24s}
.v2-miroir.trace .v2-lignes li:nth-child(4)::before,.v2-miroir.trace .v2-lignes li:nth-child(4)::after{transition-delay:.36s}

/* Le telephone de l'exemple : construit en HTML, pas une capture. */
.v2-exemple{position:relative}
.v2-ecran{width:100%;max-width:300px;margin:0 auto;border:9px solid var(--espresso);border-radius:34px;overflow:hidden;background:#fff;
  box-shadow:0 30px 60px -28px rgba(23,17,13,.5);font-size:.74rem;line-height:1.45}
.v2-ecran .haut{position:relative}
.v2-ecran .haut img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 72%}
.v2-ecran .nom{padding:14px 16px 4px;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.v2-ecran .info{display:flex;gap:10px;align-items:flex-start;padding:8px 16px;border-top:1px solid var(--rule);color:var(--ink)}
.v2-ecran .info span{color:var(--taupe)}
.v2-ecran .info u{text-decoration-color:var(--wine);color:var(--wine)}
/* Pastilles 01 a 04 : elles renvoient aux quatre lignes du miroir, pour que la
   comparaison se lise sans les explications (retour du 24/10/2026). */
.pastille{flex-shrink:0;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--wine);color:#fff;
  font-style:normal;font-size:.56rem;font-weight:700;letter-spacing:0;font-family:var(--font-body)}
.v2-ecran .vignettes{position:relative;display:grid;grid-template-columns:20px repeat(3,1fr);gap:6px;padding:8px 16px;align-items:center}
.v2-ecran .vignettes b{display:block;aspect-ratio:1;background:var(--rule);border-radius:2px}
.v2-ecran .vignettes b:nth-of-type(2){background:var(--paper-deep)}
.v2-ecran .vignettes b:nth-of-type(3){background:#D9CDB6}
.v2-ecran .appel{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 16px 16px;background:var(--wine);color:#fff;
  padding:8px;border-radius:3px;font-weight:600;letter-spacing:.04em}
.v2-ecran .appel .pastille{background:#fff;color:var(--wine)}
.v2-ecran{position:relative}
.v2-ecran>.v2-tag{position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.92);color:var(--ink)}
.v2-rue .v2-cote,.v2-exemple .v2-cote{font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:-.01em;
  text-transform:none;color:var(--ink);margin-bottom:16px}
.v2-exemple .v2-cote{text-align:center}
.v2-lignes h3 .v2-num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--wine);color:#fff;
  font-family:var(--font-body);font-size:.62rem;font-weight:700}

.v2-miroir-pied{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;margin-top:clamp(40px,5vw,64px);
  padding-top:28px;border-top:1px solid var(--rule-strong)}
.v2-miroir-pied p{font-size:1.02rem;line-height:1.7;max-width:62ch;color:var(--ink)}

@media(max-width:1080px){
  .v2-miroir{grid-template-columns:1fr 1fr;gap:40px}
  .v2-miroir .v2-lignes{grid-column:1/-1;grid-row:2}
  .v2-lignes li::before,.v2-lignes li::after{display:none}
}
@media(max-width:640px){
  .v2-miroir{grid-template-columns:1fr}
  .v2-miroir .v2-lignes{grid-row:auto}
  .v2-miroir-pied{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   III. Realisations : la liste commande l'apercu.
   -------------------------------------------------------------------------- */
.v2-travaux{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.v2-liste{list-style:none;border-top:1px solid var(--rule-strong)}
.v2-travail{border-bottom:1px solid var(--rule-strong);position:relative}
.v2-travail button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;width:100%;
  padding:24px 0 6px;cursor:pointer}
.v2-travail button:focus-visible{outline:2px solid var(--wine);outline-offset:4px}
.v2-travail .v2-num{font-size:1rem;padding-top:8px}
.v2-travail .titre{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.1;color:var(--ink);
  transition:color .3s,transform .4s var(--ease)}
.v2-travail .meta{grid-column:2;font-size:.86rem;color:var(--taupe)}
.v2-travail .bas{display:flex;gap:16px;align-items:center;padding:8px 0 22px 58px;flex-wrap:wrap}
.v2-travail .bas a{font-size:.82rem;font-weight:600;color:var(--wine);border-bottom:1px solid currentColor}
.v2-travail:not(.actif) .titre{color:#9A8F7E}
.v2-travail.actif .titre{transform:translateX(6px)}
.v2-scene{position:sticky;top:110px}
.v2-plan{display:none;position:relative;padding:0 0 40px 0}
.v2-plan.actif{display:block;animation:v2-plan .6s var(--ease)}
@keyframes v2-plan{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.v2-plan .v2-tel{right:-12px;bottom:0;width:clamp(110px,12vw,150px)}
.v2-plan .v2-navigateur{margin-right:70px}
.v2-plan figcaption{font-size:.78rem;color:var(--taupe);margin-top:16px;max-width:52ch}
.v2-travaux-pied{margin-top:40px}
@media(max-width:900px){
  .v2-travaux{grid-template-columns:1fr;gap:28px}
  .v2-scene{position:relative;top:0;order:-1}
  .v2-plan .v2-navigateur{margin-right:48px}
}

/* --------------------------------------------------------------------------
   IV. Logiciels : deux demonstrations, texte et ecran.
   -------------------------------------------------------------------------- */
.v2-ink{overflow:hidden}
.v2-ink::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 85% 0%,rgba(124,43,57,.38),transparent 70%)}
.v2-demo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:center;
  padding:clamp(36px,4vw,56px) 0;border-top:1px solid rgba(245,238,220,.14)}
.v2-demo.inverse{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.v2-demo.inverse .v2-demo-txt{order:2}
.v2-demo h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;color:var(--cream-on-dark);margin:16px 0 14px}
.v2-demo p{color:var(--cream-soft);line-height:1.7;max-width:44ch}
.v2-demo .v2-lien{margin-top:24px}
.v2-demo-ecran{position:relative;border-radius:10px;overflow:hidden;border:1px solid rgba(233,198,106,.28);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.v2-demo-ecran img{width:100%;height:auto}
.v2-prix-logiciel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:28px;align-items:end;margin-top:clamp(36px,4vw,56px);
  padding-top:30px;border-top:1px solid rgba(245,238,220,.14)}
.v2-prix-logiciel div b{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--cream-on-dark)}
.v2-prix-logiciel div span{font-size:.86rem;color:var(--cream-soft)}
@media(max-width:900px){
  .v2-demo,.v2-demo.inverse{grid-template-columns:1fr}
  .v2-demo.inverse .v2-demo-txt{order:0}
  .v2-prix-logiciel{grid-template-columns:1fr}
}

/* Finition du 24/10/2026 : une scene, deux onglets. La capture prend 62 % de la largeur. */
.v2-filigrane{position:absolute;top:clamp(28px,4vw,56px);right:clamp(-10px,2vw,40px);z-index:1;pointer-events:none;
  font-family:var(--font-display);font-weight:600;font-size:clamp(9rem,22vw,20rem);line-height:.8;color:rgba(233,198,106,.06)}
.v2-onglets{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:22px}
.v2-onglets [role=tab]{all:unset;box-sizing:border-box;cursor:pointer;padding:12px 20px;font-size:.86rem;font-weight:600;letter-spacing:.02em;
  color:var(--cream-soft);border:1px solid rgba(245,238,220,.22);border-radius:2px;transition:background .25s,color .25s,border-color .25s}
.v2-onglets [role=tab]:hover{color:var(--cream-on-dark);border-color:rgba(233,198,106,.5)}
.v2-onglets [role=tab][aria-selected=true]{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--espresso)}
.v2-onglets [role=tab]:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.v2-onglets .v2-tag{margin-left:auto}
.v2-demo-panneau{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.v2-demo-panneau[hidden]{display:none}
.v2-demo-panneau+.v2-demo-panneau{margin-top:48px}
.js-onglets .v2-demo-panneau+.v2-demo-panneau{margin-top:0}
.v2-demo-panneau.entre{animation:v2-plan .5s var(--ease)}
.v2-demo-panneau h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.45rem,2.2vw,1.9rem);line-height:1.15;color:var(--cream-on-dark);margin-bottom:12px}
.v2-demo-panneau .v2-demo-txt>p{color:var(--cream-soft);line-height:1.7}
.v2-points{list-style:none;margin:20px 0 4px}
.v2-points li{position:relative;padding:12px 0 12px 22px;border-top:1px solid rgba(245,238,220,.14);font-size:.94rem;line-height:1.55;color:var(--cream-on-dark)}
.v2-points li::before{content:"";position:absolute;left:0;top:1.3em;width:10px;height:1px;background:var(--gold-soft)}
.v2-demo-panneau .v2-lien{margin-top:22px}
.v2-logiciels-pied{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;margin-top:clamp(40px,5vw,64px);
  padding-top:28px;border-top:1px solid rgba(245,238,220,.14)}
.v2-logiciels-pied p{color:var(--cream-soft);max-width:62ch;line-height:1.65}
@media(max-width:900px){
  .v2-demo-panneau{grid-template-columns:1fr;gap:24px}
  .v2-onglets{display:grid;grid-template-columns:1fr 1fr}
  .v2-onglets [role=tab]{text-align:center;padding:12px 8px}
  .v2-onglets .v2-tag{grid-column:1/-1;margin-left:0;justify-self:start}
}

/* --------------------------------------------------------------------------
   V. Solutions : trois panneaux, un ouvert a la fois (galerie extensible).
   -------------------------------------------------------------------------- */
.v2-panneaux{display:flex;gap:14px;min-height:400px}
.v2-panneau{flex:1 1 0;min-width:0;position:relative;border:1px solid var(--rule-strong);border-radius:4px;background:#fff;
  display:grid;grid-template-rows:auto 1fr;overflow:hidden;transition:flex-grow .6s var(--ease),background .4s}
.v2-panneau.ouvert{flex-grow:2.1;background:var(--cream)}
.v2-panneau button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:14px;align-items:baseline;padding:24px 26px 0}
.v2-panneau button:focus-visible{outline:2px solid var(--wine);outline-offset:-6px}
.v2-panneau .v2-num{font-size:1.1rem}
.v2-panneau .ttr{display:flex;flex-direction:column;gap:6px}
.v2-panneau .ttr small{font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--wine)}

/* Section logiciels : usages possibles, en grille de six lignes, sans icones. */
.v2-usages-titre{font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--cream-on-dark);margin-bottom:18px}
.v2-usages{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;border-top:1px solid rgba(245,238,220,.14)}
.v2-usages li{padding:18px 0 20px;border-bottom:1px solid rgba(245,238,220,.14);font-size:.88rem;line-height:1.6;color:var(--cream-soft)}
.v2-usages b{display:block;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:6px}
.v2-usages-note{margin:28px 0 8px;font-size:.86rem;color:var(--cream-soft)}
@media(max-width:900px){.v2-usages{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.v2-usages{grid-template-columns:1fr}}
.v2-panneau h3{font-family:var(--font-display);font-weight:600;font-size:1.3rem;line-height:1.2;color:var(--ink)}
.v2-panneau .corps{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:28px;padding:16px 26px 26px;align-items:end}
.v2-panneau .corps p{font-size:.92rem;line-height:1.65;color:var(--taupe);max-width:38ch}
.v2-panneau .corps .v2-tag{margin-top:18px}
.v2-panneau:not(.ouvert) .corps{grid-template-columns:1fr}
.v2-panneau:not(.ouvert) .schema{display:none}
.v2-panneau:not(.ouvert) .corps p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.schema{color:var(--wine);margin:0}
.schema figcaption{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);text-align:center;margin-top:10px}

/* Maquettes d'exemple des solutions (retour du 24/10/2026) : des mises en page lisibles,
   jamais presentees comme des produits fabriques. Aucune etoile dessinee : regle Google. */
.maq-chevalet{position:relative;margin:0 auto;width:190px;padding:18px 16px 14px;background:#fff;border:1px solid var(--rule-strong);
  border-top:4px solid var(--wine);text-align:center;box-shadow:0 22px 30px -22px rgba(23,17,13,.45);transform:perspective(500px) rotateX(6deg)}
.maq-chevalet::after{content:"";position:absolute;left:12%;right:12%;bottom:-10px;height:10px;background:var(--rule-strong);
  clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}
.maq-chevalet .t{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink);line-height:1.2}
.maq-chevalet .qr{position:relative;width:78px;height:78px;margin:12px auto;
  background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 11px),repeating-linear-gradient(0deg,#fff 0 5px,transparent 5px 9px);
  opacity:.9}
.maq-chevalet .qr i{position:absolute;width:22px;height:22px;border:4px solid var(--ink);background:#fff;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 8px var(--ink)}
.maq-chevalet .qr i:nth-child(1){top:0;left:0}
.maq-chevalet .qr i:nth-child(2){top:0;right:0}
.maq-chevalet .qr i:nth-child(3){bottom:0;left:0}
.maq-chevalet .qr b{position:absolute;right:6px;bottom:6px;width:14px;height:14px;background:#fff}
.maq-chevalet .s{font-size:.62rem;line-height:1.4;color:var(--taupe)}
.maq-chevalet .n{margin-top:8px;padding-top:6px;border-top:1px solid var(--rule);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--wine)}

.maq-tel{margin:0 auto;width:150px;padding:16px 14px 18px;border:6px solid var(--espresso);border-radius:22px;background:#fff;
  box-shadow:0 22px 34px -22px rgba(23,17,13,.5)}
.maq-tel .t{font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--ink);text-align:center;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.maq-tel .r{margin-top:8px;font-size:.54rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wine)}
.maq-tel .l{font-size:.66rem;line-height:1.5;color:var(--ink);padding:2px 0;border-bottom:1px dotted var(--rule-strong)}

.maq-fiche{margin:0 auto;width:200px;background:#fff;border:1px solid var(--rule-strong);border-radius:8px;overflow:hidden;
  box-shadow:0 22px 30px -22px rgba(23,17,13,.45);text-align:left}
.maq-fiche .carte{position:relative;height:62px;background:
  linear-gradient(120deg,transparent 46%,#fff 46% 50%,transparent 50%),
  linear-gradient(20deg,transparent 60%,#fff 60% 63%,transparent 63%),#E8E1D2}
.maq-fiche .pin{position:absolute;left:50%;top:14px;width:16px;height:16px;margin-left:-8px;background:var(--wine);
  border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.maq-fiche .t{padding:10px 12px 2px;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--ink)}
.maq-fiche .o{padding:0 12px;font-size:.64rem;color:var(--taupe)}
.maq-fiche .o b{color:#47734A}
.maq-fiche .a{padding:2px 12px 8px;font-size:.64rem;color:var(--taupe)}
.maq-fiche .btns{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
.maq-fiche .btns span{font-size:.56rem;font-weight:600;text-align:center;padding:8px 2px;color:var(--wine);border-right:1px solid var(--rule)}
.maq-fiche .btns span:last-child{border-right:0}
.v2-solutions-pied{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between;margin-top:32px}
.v2-solutions-pied p{font-size:.92rem;color:var(--taupe);max-width:62ch}
/* Ordinateur : maquettes plus grandes dans le panneau ouvert (finition du 24/10/2026). */
.v2-panneau .corps{grid-template-columns:minmax(0,1fr) 260px}
.v2-panneau.ouvert .maq-chevalet{width:224px}
.v2-panneau.ouvert .maq-tel{width:176px}
.v2-panneau.ouvert .maq-fiche{width:240px}
.v2-carrousel-nav{display:none}

/* Telephone et tablette : carrousel tactile. Une carte a 84 % de la largeur, la suivante
   depasse a droite pour montrer qu'il y en a d'autres ; fleches et compteur en dessous.
   Remplace l'empilement des trois panneaux (2 039 px mesures a 390 px). */
@media(max-width:900px){
  /* align-items:flex-start : chaque carte garde sa hauteur naturelle (retour du 24/10/2026).
     Le conteneur prend la hauteur de la plus haute, donc rien ne saute au changement de carte. */
  .v2-panneaux{align-items:flex-start;min-height:0;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:0 var(--gut);scroll-padding:0 var(--gut)}
  .v2-panneaux::-webkit-scrollbar{display:none}
  .v2-panneau,.v2-panneau.ouvert{flex:0 0 84%;scroll-snap-align:start;background:#fff;grid-template-rows:auto auto;align-content:start}
  .v2-panneau .corps{align-items:start;padding-top:20px}
  .v2-panneau .corps,.v2-panneau:not(.ouvert) .corps{grid-template-columns:1fr;gap:18px}
  .v2-panneau:not(.ouvert) .schema{display:block}
  .v2-panneau:not(.ouvert) .corps p{display:block}
  .v2-panneau .corps p{max-width:none}
  .v2-panneau button{cursor:default}
  .v2-panneau .schema{order:-1}
  .v2-carrousel-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
  .v2-carrousel-nav button{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;
    border:1px solid var(--rule-strong);border-radius:50%;font-size:1.05rem;color:var(--wine);background:#fff}
  .v2-carrousel-nav button:disabled{opacity:.35;cursor:default}
  .v2-carrousel-nav button:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
  .v2-carrousel-nav .compteur{font-size:.84rem;font-weight:600;letter-spacing:.08em;color:var(--ink);min-width:3.2em;text-align:center}
}

/* --------------------------------------------------------------------------
   VI. Methode : la ligne se remplit au defilement.
   -------------------------------------------------------------------------- */
.v2-etapes{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0 28px;position:relative;padding-top:36px;--p:0}
.v2-etapes::before,.v2-etapes::after{content:"";position:absolute;top:8px;left:0;height:1px}
.v2-etapes::before{right:0;background:var(--rule-strong)}
.v2-etapes::after{width:calc(var(--p) * 100%);background:var(--wine);transition:width .2s linear}
.v2-etape{position:relative}
.v2-etape::before{content:"";position:absolute;top:-33px;left:0;width:11px;height:11px;border-radius:50%;background:var(--cream);
  border:1px solid var(--wine);transition:background .4s}
.v2-etape.passe::before{background:var(--wine)}
.v2-etape .v2-num{font-size:2.4rem;line-height:1}
.v2-etape h3{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--ink);margin:12px 0 8px}
.v2-etape p{font-size:.88rem;line-height:1.6;color:var(--taupe)}
.v2-etapes-note{margin-top:36px;font-size:.88rem;color:var(--taupe);padding-top:20px;border-top:1px solid var(--rule-strong)}
@media(max-width:900px){
  .v2-etapes{grid-template-columns:1fr;gap:28px;padding:0 0 0 30px}
  .v2-etapes::before,.v2-etapes::after{top:0;left:5px;width:1px;height:auto;bottom:0}
  .v2-etapes::after{height:calc(var(--p) * 100%);bottom:auto;width:1px}
  .v2-etape::before{top:6px;left:-30px}
}

/* --------------------------------------------------------------------------
   VII. Tarifs : quatre colonnes de grand livre, jamais des paliers.
   -------------------------------------------------------------------------- */
/* Trois blocs separes. Le premier, les sites, porte les deux seuls prix fermes :
   fond bordeaux, c'est le point focal. Les deux autres restent clairs et sobres. */
.v2-tarifs{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;align-items:stretch}
.v2-tarif{padding:32px 30px 34px;border:1px solid var(--rule-strong);border-radius:4px;background:#fff;display:flex;flex-direction:column}
.v2-tarif h3{font-family:var(--font-display);font-weight:600;font-size:1.45rem;line-height:1.2;color:var(--ink);margin:0 0 26px;
  display:flex;gap:12px;align-items:baseline}
.v2-tarif h3 .v2-num{font-size:1.1rem}
.v2-tarif.fort{background:var(--wine);border-color:var(--wine);color:var(--cream-on-dark);box-shadow:0 30px 60px -34px rgba(72,22,32,.75)}
.v2-tarif.fort h3{color:#fff}
.v2-tarif.fort h3 .v2-num{color:var(--gold-soft)}
.v2-tarif.fort .v2-duo div>span{color:var(--gold-soft);letter-spacing:.14em;text-transform:uppercase;font-size:.68rem}
.v2-tarif.fort p.v2-montant{color:#fff;font-size:clamp(2.4rem,4vw,3.3rem)}
.v2-tarif.fort p{color:var(--cream-soft)}
.v2-tarif.fort .v2-duo{gap:24px;padding-bottom:26px;border-bottom:1px solid rgba(245,238,220,.22)}
.v2-tarif.fort .v2-duo>div+div{padding-left:24px;border-left:1px solid rgba(245,238,220,.22)}
.v2-tarif.fort .v2-duo{margin-bottom:26px}
.v2-tarif.fort .btn{align-self:flex-start;margin-top:auto}
.v2-lignes-prix{list-style:none;display:flex;flex-direction:column;gap:0}
.v2-lignes-prix li{padding:16px 0;border-top:1px solid var(--rule)}
.v2-lignes-prix li:first-child{border-top:0;padding-top:0}
.v2-lignes-prix span{display:block;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.v2-lignes-prix b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.6rem;line-height:1.2;color:var(--ink);margin-top:6px;
  font-variant-numeric:lining-nums}
.v2-lignes-prix p{margin-top:6px}
.v2-montant,.v2-tarif p.v2-montant{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;color:var(--wine);
  font-variant-numeric:lining-nums;margin-top:0}
.v2-tarif p.v2-montant + p{margin-top:14px}
.v2-montant small{font-family:var(--font-body);font-size:.78rem;font-weight:500;color:var(--taupe);letter-spacing:.02em;margin-right:6px}
.v2-tarif p{font-size:.86rem;line-height:1.6;color:var(--taupe);margin-top:12px}
.v2-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.v2-duo div>span{display:block;font-size:.8rem;font-weight:600;color:var(--ink);margin-bottom:8px}
.v2-tarifs-pied{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px;align-items:center;margin-top:30px;
  padding-top:22px;border-top:1px solid var(--rule)}
.v2-tarifs-pied p{font-size:.92rem;color:var(--ink);max-width:70ch}
@media(max-width:1000px){
  .v2-tarifs{grid-template-columns:1fr}
  .v2-tarif{padding:26px 22px 28px}
}
@media(max-width:420px){
  .v2-tarif.fort .v2-duo>div+div{padding-left:16px}
  .v2-tarif.fort .v2-duo{gap:16px}
}

/* --------------------------------------------------------------------------
   Formulaire : cases a cocher des solutions (decision du 23/10/2026).
   -------------------------------------------------------------------------- */
.df-interets{grid-column:1/-1;border:0;padding:0;margin:0}
.df-interets legend{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:10px}
.df-interets .cases{display:flex;flex-wrap:wrap;gap:8px}
.devis-form .df-interets label{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:.84rem;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--cream-on-dark);padding:8px 12px;border:1px solid var(--line-on-dark);
  border-radius:2px;cursor:pointer;transition:background .25s,border-color .25s}
.df-interets input{accent-color:var(--camel-bright);width:16px;height:16px}
.df-interets label:has(input:checked){background:rgba(233,198,106,.14);border-color:var(--camel-bright)}

/* --------------------------------------------------------------------------
   Finition du 24/10/2026 : realisations, methode, contact, pied de page.
   -------------------------------------------------------------------------- */
/* Realisations : l'apercu passe a 60 % de la largeur sur ordinateur. */
@media(min-width:901px){
  .v2-travaux{grid-template-columns:minmax(0,.67fr) minmax(0,1fr);gap:48px}
  .v2-travail .titre{font-size:clamp(1.4rem,2.2vw,1.95rem)}
}
/* Methode sur telephone : numero et titre sur une ligne, le texte garde sa taille. */
@media(max-width:900px){
  .v2-etapes{gap:24px}
  .v2-etape{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline}
  .v2-etape .v2-num{font-size:1.6rem;grid-row:1}
  .v2-etape h3{margin:0;grid-column:2}
  .v2-etape p{grid-column:1/-1;margin-top:6px;font-size:.92rem}
}
/* Contact : le formulaire respire davantage. */
.devis-form{gap:22px 18px}
.devis-form label{margin-bottom:10px}
@media(max-width:900px){.contact-illu{display:none}}

/* --------------------------------------------------------------------------
   Pied de page V2 : espresso, pour se detacher du bloc contact bordeaux
   (finition du 24/10/2026). Sur toutes les pages.
   -------------------------------------------------------------------------- */
footer{background:var(--espresso);color:var(--cream-on-dark);border-top:3px solid var(--wine)}
@media (max-width:420px){.foot-cols{grid-template-columns:1fr 1fr;gap:24px 20px}}
@media (max-width:900px){.foot-links a{display:block;padding:5px 0}}
footer .foot-col b{color:var(--gold-soft)}
footer .foot-links a,footer .legal a{color:var(--cream-soft)}
footer .foot-links a:hover,footer .legal a:hover{color:#fff}
footer .foot-id,footer .copy{color:rgba(245,238,220,.62)}
footer .legal{border-color:rgba(245,238,220,.16)}
.foot-signe{font-family:var(--font-display);font-weight:600;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.1;color:var(--cream-on-dark);
  max-width:22ch;padding-bottom:28px;border-bottom:1px solid rgba(245,238,220,.16)}

/* --------------------------------------------------------------------------
   Pages interieures V2 (sites internet, solutions, contact).
   -------------------------------------------------------------------------- */
.v2-page-tete{padding:clamp(128px,14vw,168px) 0 clamp(48px,6vw,80px)}
.v2-page-tete h1{font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.05;letter-spacing:-.022em;
  color:var(--ink);max-width:20ch;margin-top:22px}
.v2-page-tete h1 .acc{color:var(--wine)}
.v2-page-tete .v2-lede{font-size:clamp(1.02rem,1.3vw,1.16rem)}
.v2-deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.v2-format{border-top:2px solid var(--ink);padding-top:24px}
.v2-format h3{font-family:var(--font-display);font-weight:600;font-size:1.6rem;color:var(--ink);display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.v2-format h3 .v2-montant{font-size:2rem}
.v2-format p{color:var(--taupe);margin-top:12px;line-height:1.7}
.v2-format ul,.v2-coche{list-style:none;margin-top:18px}
.v2-format li,.v2-coche li{padding:10px 0;border-top:1px solid var(--rule);font-size:.92rem;line-height:1.55;display:grid;grid-template-columns:22px 1fr}
.v2-format li::before,.v2-coche li::before{content:"";width:10px;height:1px;background:var(--wine);margin-top:.8em}
.v2-galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.v2-galerie figure{margin:0}
.v2-galerie a{display:block}
.v2-galerie img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:top;border-radius:14px;border:5px solid var(--espresso)}
.v2-galerie figcaption{font-size:.84rem;margin-top:10px;color:var(--ink);font-weight:600}
.v2-galerie figcaption span{display:block;font-weight:400;color:var(--taupe);font-size:.78rem}
.v2-galerie figcaption small{display:block;margin-top:8px;font-weight:400;font-size:.8rem;line-height:1.5}
.v2-galerie figcaption small b{font-weight:600}
@media(max-width:900px){.v2-deux{grid-template-columns:1fr}.v2-galerie{grid-template-columns:repeat(2,minmax(0,1fr))}}

.v2-objectifs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.v2-objectif{padding:28px 0;border-top:1px solid var(--rule-strong)}
.v2-objectif h3{font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:var(--ink);display:flex;gap:14px;align-items:baseline}
.v2-objectif p{color:var(--taupe);margin-top:10px;line-height:1.7;font-size:.94rem}
.v2-objectif .v2-tag{margin-top:14px}
@media(max-width:800px){.v2-objectifs{grid-template-columns:1fr}}

.v2-metiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.v2-metier{padding:24px 24px 28px;border-right:1px solid var(--rule)}
.v2-metier:first-child{padding-left:0}
.v2-metier:last-child{border-right:0}
.v2-metier h3{font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--ink)}
.v2-metier ul{list-style:none;margin-top:14px}
.v2-metier li{font-size:.88rem;line-height:1.5;padding:8px 0;border-top:1px solid var(--rule);color:var(--ink)}
.v2-metier .v2-lien{margin-top:16px;font-size:.82rem}
@media(max-width:1000px){.v2-metiers{grid-template-columns:1fr 1fr}.v2-metier{border-bottom:1px solid var(--rule)}.v2-metier:nth-child(2n){border-right:0}.v2-metier:nth-child(odd){padding-left:0}}
@media(max-width:560px){.v2-metiers{grid-template-columns:1fr}.v2-metier{padding:22px 0;border-right:0}}

.v2-avertissement{background:var(--cream);border-left:2px solid var(--wine);padding:18px 22px;font-size:.92rem;line-height:1.65;max-width:76ch}

.v2-coord{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.v2-coord div{padding:22px 24px 26px;border-right:1px solid var(--rule)}
.v2-coord div:first-child{padding-left:0}
.v2-coord div:last-child{border-right:0}
.v2-coord b{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:10px}
.v2-coord a,.v2-coord span{font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--ink)}
.v2-coord p{font-size:.86rem;color:var(--taupe);margin-top:8px}
@media(max-width:800px){.v2-coord{grid-template-columns:1fr}.v2-coord div{padding:20px 0;border-right:0;border-bottom:1px solid var(--rule)}}

/* --------------------------------------------------------------------------
   Page Logiciels V2 (24/10/2026)
   -------------------------------------------------------------------------- */
.v2-fil{display:flex;gap:10px;font-size:.78rem;color:var(--taupe);margin-bottom:22px}
/* En-tete avec capture reelle a droite (page Logiciels). */
.v2-tete-image{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,64px);align-items:center}
.v2-tete-capture{margin:0;position:relative}
.v2-tete-capture img{width:100%;height:auto;border-radius:10px;border:1px solid var(--rule-strong);box-shadow:0 34px 70px -34px rgba(23,17,13,.55)}
.v2-tete-capture figcaption{position:absolute;left:18px;bottom:-14px}
.v2-tete-capture .v2-tag{background:#fff}
@media(max-width:900px){.v2-tete-image{grid-template-columns:1fr}.v2-tete-capture{display:none}}
.v2-note-cas{margin-top:14px;font-size:.82rem;line-height:1.55;color:var(--cream-soft)}
.v2-fil a{border-bottom:1px solid var(--rule-strong)}
.v2-page-tete .v2-hero-cta{margin-top:30px}

/* La chaine de recopie : le texte de J-M mis en image, quatre maillons puis un seul. */
.v2-chaine{margin:0 0 clamp(36px,4vw,56px)}
.v2-chaine .avant{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:m}
.v2-chaine .avant li{position:relative;padding:22px 22px 24px;border:1px solid var(--rule-strong);border-right:0;background:#fff;
  font-family:var(--font-display);font-weight:600;font-size:1.15rem;line-height:1.25;color:var(--ink)}
.v2-chaine .avant li:last-child{border-right:1px solid var(--rule-strong)}
.v2-chaine .avant li+li{padding-left:46px}
.v2-chaine .avant li b{display:block;font-family:var(--font-body);font-size:.66rem;letter-spacing:.18em;color:var(--wine);margin-bottom:10px}
.v2-chaine .avant li+li::before{content:"recopie";position:absolute;left:-1px;top:50%;transform:translate(-50%,-50%);background:var(--wine);color:#fff;
  font-family:var(--font-body);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 7px;border-radius:2px;z-index:1}
.v2-chaine .apres{margin-top:14px;padding:20px 24px;background:var(--espresso);color:var(--cream-on-dark);border-radius:2px;
  font-family:var(--font-display);font-size:1.25rem;font-weight:600;line-height:1.35}
.v2-chaine .apres .v2-cote{display:block;font-family:var(--font-body);font-size:.66rem;letter-spacing:.2em;color:var(--gold-soft);margin-bottom:6px}
.v2-paragraphe{font-size:1.05rem;line-height:1.75;color:var(--ink);max-width:70ch}
@media(max-width:800px){
  .v2-chaine .avant{grid-template-columns:1fr}
  .v2-chaine .avant li,.v2-chaine .avant li+li{border-right:1px solid var(--rule-strong);border-bottom:0;padding:22px 20px 18px}
  .v2-chaine .avant li:last-child{border-bottom:1px solid var(--rule-strong)}
  .v2-chaine .avant li+li::before{left:50%;top:0}
}

/* Onglets par metier : situation a gauche, ce que l'outil peut faire a droite. */
.v2-cas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding:clamp(28px,3vw,40px) 0 8px;
  border-top:1px solid rgba(245,238,220,.14)}
.v2-cas[hidden]{display:none}
.v2-cas.entre{animation:v2-plan .5s var(--ease)}
.v2-cas .depart p{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.25;color:var(--cream-on-dark);margin-top:16px}
.v2-cas .peut{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}
.js-onglets .v2-cas+.v2-cas{margin-top:0}
.v2-cas+.v2-cas{margin-top:24px}
.v2-note-sombre{margin-top:28px;padding-top:20px;border-top:1px solid rgba(245,238,220,.14);font-size:.9rem;color:var(--cream-soft);max-width:80ch}
@media(max-width:900px){
  .v2-cas{grid-template-columns:1fr}
  /* Les cinq metiers restent tous visibles : ils passent a la ligne plutot que de defiler
     hors de l'ecran sans indice (capture 390 px du 24/10/2026). */
  .v2-metiers-onglets .v2-onglets{display:flex;flex-wrap:wrap;gap:8px}
  .v2-metiers-onglets .v2-onglets [role=tab]{flex:1 1 auto;white-space:nowrap;padding:11px 14px}
}
/* En-tete des pages interieures : les boutons passent a la ligne sur telephone. */
@media(max-width:640px){
  .v2-page-tete .v2-hero-cta,#conditions .v2-hero-cta{flex-wrap:wrap}
  .v2-page-tete .v2-hero-cta .btn,#conditions .v2-hero-cta .btn{flex:1 1 auto}
}
.v2-tarif.fort .v2-montant small{color:var(--cream-soft)}

/* Onglets sur fond clair (demonstration) et demonstration vivante. */
.v2-onglets.clair [role=tab]{color:var(--ink);border-color:var(--rule-strong);background:#fff}
.v2-onglets.clair [role=tab]:hover{border-color:var(--wine);color:var(--wine)}
.v2-onglets.clair [role=tab][aria-selected=true]{background:var(--wine);border-color:var(--wine);color:#fff}
.v2-onglets.clair [role=tab]:focus-visible{outline-color:var(--wine)}
.v2-demo-vivante .demo-screen[hidden]{display:none}
.v2-demo-vivante .demo-screen+.demo-screen{margin-top:20px}
.js-onglets .demo-screen+.demo-screen{margin-top:0}
.v2-demo-vivante .demo-screen iframe{height:640px}

/* Methode en quatre temps. */
.v2-quatre{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;border-top:2px solid var(--ink)}
.v2-quatre li{padding-top:24px}
.v2-quatre .v2-num{font-size:2.2rem;line-height:1}
.v2-quatre h3{font-family:var(--font-display);font-weight:600;font-size:1.3rem;color:var(--ink);margin:12px 0 8px}
.v2-quatre p{font-size:.94rem;line-height:1.65;color:var(--taupe)}
@media(max-width:900px){.v2-quatre{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.v2-quatre{grid-template-columns:1fr}}

/* Conditions : deux blocs de prix et la fiche recapitulative. */
.v2-conditions{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:16px;align-items:stretch}
.v2-conditions .v2-tarif h3{margin-bottom:16px}
.v2-fiche{margin:0;padding:24px 26px;border:1px solid var(--rule-strong);border-radius:4px;background:#fff}
.v2-fiche div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--rule);font-size:.88rem}
.v2-fiche div:first-child{border-top:0;padding-top:0}
.v2-fiche dt{color:var(--taupe)}
.v2-fiche dd{margin:0;font-weight:600;color:var(--ink);text-align:right}
.v2-conditions-texte{margin-top:32px}
.v2-conditions-texte p{font-size:.96rem;line-height:1.7;color:var(--ink)}
.v2-conditions-texte a{color:var(--wine);border-bottom:1px solid currentColor}
@media(max-width:1000px){.v2-conditions{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Page Sites internet V2 (24/10/2026)
   -------------------------------------------------------------------------- */
.v2-situations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.v2-situations article{padding:26px 28px 30px;border-right:1px solid var(--rule)}
.v2-situations article:first-child{padding-left:0}
.v2-situations article:last-child{border-right:0}
.v2-situations .v2-num{font-size:2rem;line-height:1}
.v2-situations h3{font-family:var(--font-display);font-weight:600;font-size:1.4rem;line-height:1.2;color:var(--ink);margin:14px 0 10px}
.v2-situations p{font-size:.96rem;line-height:1.65;color:var(--taupe)}
.v2-trois-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.v2-trois-col .v2-cote{font-family:var(--font-display);font-size:1.3rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);
  padding-bottom:10px;border-bottom:2px solid var(--wine);margin-bottom:6px}
/* Telephone : chaque categorie dans son propre bloc, pour que les trois listes ne se
   confondent plus (retour du 24/10/2026, aucune information retiree). */
@media(max-width:900px){
  .v2-trois-col{gap:14px}
  .v2-trois-col>div{background:var(--cream);border-radius:4px;padding:20px 20px 10px}
  .v2-trois-col .v2-coche li{padding:12px 0;font-size:.95rem;line-height:1.6}
}
.v2-ink .v2-galerie figcaption{color:var(--cream-on-dark)}
.v2-ink .v2-galerie figcaption span{color:var(--cream-soft)}
.v2-ink .v2-galerie img{border-color:#2A211B}
.v2-galerie-pied{margin-top:32px}
.v2-jalons{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v2-jalons li{background:#fff;border:1px solid var(--rule-strong);border-radius:4px;padding:24px 26px 26px}
.v2-jalons .v2-num{font-size:1.8rem;line-height:1}
.v2-jalons b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--ink);margin:12px 0 8px}
.v2-jalons p{font-size:.94rem;line-height:1.6;color:var(--taupe)}
.v2-paiement{display:grid;grid-template-columns:1fr 1.4fr auto;gap:20px 40px;align-items:end;margin-top:32px;padding-top:26px;border-top:1px solid var(--rule-strong)}
.v2-paiement h3{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--ink);margin-bottom:6px}
.v2-paiement p{font-size:.94rem;line-height:1.6;color:var(--taupe)}
.v2-apres{font-size:1.02rem;line-height:1.7;color:var(--ink);max-width:76ch;padding:22px 26px;border-left:2px solid var(--wine);background:var(--cream);
  margin-bottom:clamp(48px,6vw,80px)}
.v2-apres a{color:var(--wine);border-bottom:1px solid currentColor}
@media(max-width:900px){
  .v2-situations,.v2-trois-col,.v2-jalons,.v2-paiement{grid-template-columns:1fr}
  .v2-situations article{padding:22px 0 24px;border-right:0;border-bottom:1px solid var(--rule)}
  .v2-situations article:last-child{border-bottom:0}
}

/* --------------------------------------------------------------------------
   Page Solutions V2 (24/10/2026). Visuels : exemples de mise en page, jamais des produits.
   -------------------------------------------------------------------------- */
.v2-trio{position:relative;margin:0;min-height:420px;background:var(--cream);border-radius:6px;padding:28px}
.v2-trio>div{position:absolute}
.v2-trio .maq-chevalet{left:6%;top:16%;transform:perspective(500px) rotateX(6deg) rotate(-4deg)}
.v2-trio .maq-tel{left:40%;top:6%;z-index:2}
.v2-trio .maq-tel{left:36%}
.v2-trio .maq-fiche{right:2%;bottom:9%;z-index:3;transform:rotate(3deg)}
.v2-trio figcaption{position:absolute;left:18px;bottom:16px}
.v2-trio .v2-tag{background:#fff}
@media(max-width:900px){.v2-trio{display:none}}

.v2-sol-panneau{padding-top:8px}
.v2-sol-panneau[hidden]{display:none}
.v2-sol-panneau.entre{animation:v2-plan .5s var(--ease)}
.v2-sol-liste{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:10px 0 26px}
.v2-sol-liste li{display:flex;flex-direction:column;gap:8px;padding:22px 22px 20px;border:1px solid rgba(245,238,220,.16);border-radius:4px;
  background:rgba(245,238,220,.03)}
.v2-sol-liste b{font-family:var(--font-display);font-weight:600;font-size:1.2rem;line-height:1.25;color:var(--cream-on-dark)}
.v2-sol-liste p{font-size:.9rem;line-height:1.6;color:var(--cream-soft);flex:1}
.v2-sol-liste a{align-self:flex-start;font-size:.82rem;font-weight:600;color:var(--gold-soft);border-bottom:1px solid currentColor;padding:6px 0}

.v2-sol-ligne{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:center;
  padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--rule)}
.v2-sol-ligne.inverse .v2-sol-visuel{order:2}
.v2-sol-visuel{margin:0;display:grid;place-items:center;min-height:300px;background:var(--cream);border-radius:6px;padding:32px}
.v2-sol-ligne .v2-num{font-size:2rem;line-height:1}
.v2-sol-ligne h3,.v2-sol-autres h3{font-family:var(--font-display);font-weight:600;font-size:1.6rem;color:var(--ink);margin:10px 0 12px}
.v2-sol-ligne p,.v2-sol-autres p{font-size:1rem;line-height:1.7;color:var(--taupe);max-width:52ch}
.v2-sol-ligne .v2-tag,.v2-sol-ligne .v2-lien{margin-top:18px}
/* Ce que la solution change pour le professionnel (retour du 24/10/2026). */
.v2-benefice{margin-top:14px;padding:14px 18px;background:var(--cream);border-left:2px solid var(--wine);font-size:.96rem;line-height:1.6;color:var(--ink);max-width:52ch}
.v2-benefice b{display:block;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wine);margin-bottom:4px}
.v2-sol-ligne .v2-benefice{color:var(--ink)}
/* Avant le formulaire : les trois choses a preciser. */
.v2-preparer{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px 56px;align-items:end;padding:28px 0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule-strong)}
.v2-preparer .v2-eyebrow{grid-column:1}
.v2-preparer .v2-h2{grid-column:1;margin-top:0}
.v2-preparer ol{grid-column:2;grid-row:1/span 2;list-style:none}
.v2-preparer li{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--rule);font-size:1rem;color:var(--ink)}
.v2-preparer li:first-child{border-top:0}
.v2-preparer li .v2-num{font-size:1.3rem}
@media(max-width:800px){.v2-preparer{grid-template-columns:1fr}.v2-preparer ol{grid-column:1;grid-row:auto}}
.v2-sol-autres{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--rule)}
.v2-sol-autres .v2-num{font-size:1.6rem}
.v2-sol-autres .v2-lien{margin-top:16px}
@media(max-width:900px){
  .v2-sol-ligne,.v2-sol-autres{grid-template-columns:1fr}
  .v2-sol-ligne.inverse .v2-sol-visuel{order:0}
  .v2-sol-visuel{min-height:0;padding:28px 16px}
}

/* --------------------------------------------------------------------------
   Page Realisations V2 (24/10/2026) : une etude par site, visuel genereux.
   -------------------------------------------------------------------------- */
.v2-sommaire{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:32px;padding-top:22px;border-top:1px solid var(--rule-strong)}
.v2-sommaire a{display:inline-flex;gap:10px;align-items:baseline;font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--ink)}
.v2-sommaire a:hover{color:var(--wine)}
.v2-sommaire .v2-num{font-size:.9rem}
.v2-etude .v2-wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.v2-etude.inverse .v2-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.v2-etude.inverse .v2-etude-visuel{order:2}
.v2-etude-visuel{position:relative;padding:0 0 120px 0}
.v2-etude-visuel .v2-navigateur.second{position:absolute;width:56%;right:-4%;bottom:0;box-shadow:0 30px 60px -26px rgba(23,17,13,.55)}
.v2-etude-visuel .v2-tel{left:-3%;bottom:30px;width:clamp(110px,11vw,150px)}
.v2-etude-visuel.une-page{padding-bottom:40px}
.v2-etude-visuel.une-page .v2-tel{left:auto;right:-3%;bottom:0}
.v2-ink .v2-navigateur{border-color:#3A2E26}
/* La capture principale ouvre le site du client (retour du 24/10/2026). */
a.v2-navigateur{display:block;color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
a.v2-navigateur:hover{transform:translateY(-3px);box-shadow:0 36px 64px -28px rgba(23,17,13,.45)}
a.v2-navigateur:focus-visible{outline:2px solid var(--wine);outline-offset:4px}
.v2-ink a.v2-navigateur:focus-visible{outline-color:var(--gold-soft)}
.v2-etude-tete{display:flex;gap:14px;align-items:center}
.v2-etude-tete .v2-num{font-size:2rem;line-height:1}
.v2-etude-txt h2{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.05;color:var(--ink);margin:14px 0 22px}
.v2-ink .v2-etude-txt h2{color:var(--cream-on-dark)}
.v2-etude-txt dl{margin:0 0 24px}
.v2-etude-txt dl div{padding:14px 0;border-top:1px solid var(--rule-strong)}
.v2-ink .v2-etude-txt dl div{border-color:rgba(245,238,220,.16)}
.v2-etude-txt dt{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--wine);margin-bottom:6px}
.v2-ink .v2-etude-txt dt{color:var(--gold-soft)}
.v2-etude-txt dd{margin:0;font-size:.98rem;line-height:1.65;color:var(--ink)}
.v2-ink .v2-etude-txt dd{color:var(--cream-on-dark)}
.v2-commun{font-size:.98rem;line-height:1.65;color:var(--taupe);margin-top:12px}
.v2-logiciels-pied.clair{border-color:var(--rule-strong)}
.v2-logiciels-pied.clair p{color:var(--taupe)}
.v2-suite{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:end;justify-content:space-between}
.v2-suite .v2-eyebrow{flex-basis:100%}
.v2-suite .v2-h2{margin-top:0;max-width:22ch}
@media(max-width:900px){
  .v2-etude .v2-wrap,.v2-etude.inverse .v2-wrap{grid-template-columns:1fr}
  .v2-etude.inverse .v2-etude-visuel{order:0}
  .v2-etude-visuel{padding-bottom:80px}
  .v2-etude-visuel .v2-navigateur.second{width:62%;right:0}
  .v2-etude-visuel .v2-tel{left:0;width:96px;border-width:5px;border-radius:16px}
  /* Sur téléphone, crème et blanc se distinguent mal : un filet sépare les études. */
  .v2-etude+.v2-etude{border-top:1px solid var(--rule-strong)}
}

@media (prefers-reduced-motion:reduce){
  .v2-cas.entre,.v2-sol-panneau.entre{animation:none}
  .v2-hero h1 .l>span,.v2-vitrine,.v2-plan.actif{animation:none}
  .v2-lignes li::before,.v2-lignes li::after,.v2-etapes::after,.v2-panneau,.nav-ind,a.v2-navigateur{transition:none}
}

/* Page Tarifs (24/10/2026). Le sommaire porte le prix de chaque famille ; les precisions
   contractuelles passent en petit, apres les prix, le contenu, les frais et le paiement. */
.v2-sommaire-prix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-top:0}
.v2-sommaire-prix li+li{border-left:1px solid var(--rule-strong)}
.v2-sommaire-prix a{display:flex;flex-direction:column;align-items:flex-start;gap:6px;height:100%;padding:22px 22px 4px;font-size:1.08rem}
.v2-sommaire-prix li:first-child a{padding-left:0}
.v2-sommaire-prix b{font-family:var(--font-body);font-size:.92rem;font-weight:600;color:var(--wine);font-variant-numeric:lining-nums}
.v2-socle{margin-top:28px;padding-top:20px;border-top:1px solid var(--rule-strong);font-size:.95rem;line-height:1.65;color:var(--ink);max-width:80ch}
#sites .v2-trois-col{margin-top:44px}
.v2-precision{margin-top:28px;font-size:.84rem;line-height:1.65;color:var(--taupe);max-width:92ch}
.v2-precision a{color:var(--wine);border-bottom:1px solid currentColor}
#sites .v2-hero-cta,#logiciels .v2-hero-cta{align-items:center;gap:16px 28px}
.v2-paiement-tete{grid-template-columns:1fr 1.4fr;margin:0 0 28px;padding-top:0;border-top:0}
.v2-paiement-tete h3{font-size:1.35rem}
.v2-paiement-tete p{color:var(--ink)}
.v2-paiement-tete{align-items:start}
.v2-engagements{margin-top:28px;max-width:780px}
.v2-engagements dd{white-space:nowrap}
.v2-deux-tarifs{gap:16px}
.v2-sol-prix{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px clamp(24px,3vw,48px)}
.v2-sol-prix li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:20px;border-top:2px solid var(--ink)}
.v2-sol-prix span{font-family:var(--font-display);font-weight:600;font-size:1.35rem;line-height:1.2;color:var(--ink)}
.v2-sol-prix b{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin-bottom:6px}
.v2-tarifs-apres{grid-template-columns:1fr 1.25fr 1fr}
.v2-tarifs-apres .v2-montant small{margin:0 0 0 8px}
.v2-tarif .v2-coche{margin-top:16px}
.v2-tarif .v2-coche li{font-size:.86rem;color:var(--ink)}
@media(max-width:900px){
  .v2-sommaire-prix{grid-template-columns:1fr 1fr}
  .v2-sommaire-prix li+li{border-left:0}
  .v2-sommaire-prix li{border-top:1px solid var(--rule)}
  .v2-sommaire-prix li:nth-child(-n+2){border-top:0}
  .v2-sommaire-prix a{padding:16px 12px 14px 0}
  .v2-sommaire-prix li:nth-child(2n) a{padding-left:14px;border-left:1px solid var(--rule)}
  .v2-cream .v2-trois-col>div{background:#fff}
  .v2-paiement-tete,.v2-sol-prix{grid-template-columns:1fr}
}
@media(max-width:1000px){.v2-tarifs-apres{grid-template-columns:1fr}}
@media(max-width:640px){#sites .v2-hero-cta,#logiciels .v2-hero-cta{flex-wrap:wrap}}

/* Pages metier V2 (25/10/2026) : photographe, commerce, auto-ecole, garage, avocat.
   Maquettes d'exemple sur la base de .maq-tel, toujours legendees « Exemple de mise en page ». */
.v2-maq{margin:0;display:flex;flex-direction:column;align-items:center;gap:22px}
.v2-maq .maq-tel{width:220px;padding:18px 18px 20px}
.maq-tel .c{margin-top:8px;padding:7px 9px;border:1px solid var(--rule-strong);border-radius:6px;font-size:.66rem;color:var(--taupe);background:#fff}
.maq-tel .c b{display:block;font-size:.5rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wine);margin-bottom:2px}
.maq-tel .bt{margin-top:12px;padding:8px;border-radius:6px;background:var(--wine);color:#fff;text-align:center;font-size:.66rem;font-weight:600}
.maq-tel .art{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dotted var(--rule-strong);font-size:.66rem;color:var(--ink)}
.maq-tel .art i{font-style:normal;color:var(--wine);font-weight:600}
.maq-tel .bulle{margin-top:10px;padding:10px 11px;border-radius:10px 10px 10px 2px;background:var(--cream);font-size:.66rem;line-height:1.55;color:var(--ink)}
.v2-parcours{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 34px}
.v2-parcours .fleche{font-family:var(--font-display);font-size:2rem;color:var(--gold-soft)}
.v2-parcours .maq-tel{width:220px;padding:18px 18px 20px}
.v2-ink .v2-maq figcaption .v2-tag,.v2-ink .v2-parcours-legende .v2-tag{background:transparent}
.v2-parcours-legende{margin-top:26px;text-align:center}
.v2-coche.deux{columns:2;column-gap:clamp(24px,4vw,56px)}
.v2-coche.deux li{break-inside:avoid}
.v2-metier-note{margin-top:28px}
.v2-autres{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.v2-autres a{display:inline-block;padding:9px 14px;border:1px solid var(--rule-strong);border-radius:3px;font-size:.88rem;font-weight:600;color:var(--ink)}
.v2-autres a:hover{border-color:var(--wine);color:var(--wine)}
.v2-format-recap{margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end}
.v2-format-recap .v2-fiche dd{flex:0 0 auto;max-width:60%}
/* Retour du 25/10/2026 : liens de l'etude empiles, un par ligne ; telephones d'exemple
   un peu plus grands dans l'en-tete sur ordinateur. */
.v2-etude-txt .v2-hero-cta{flex-direction:column;align-items:flex-start;gap:14px;flex-wrap:nowrap}
@media(min-width:901px){.v2-page-tete .v2-maq .maq-tel{zoom:1.25}}
@media(max-width:900px){
  .v2-coche.deux{columns:1}
  .v2-maq .maq-tel,.v2-parcours .maq-tel{width:min(240px,100%)}
  .v2-parcours{flex-direction:column}
  .v2-parcours .fleche{transform:rotate(90deg);line-height:1}
  .v2-format-recap{grid-template-columns:1fr}
}

/* Bandeau de consentement (30/10/2026). Accepter et refuser ont le meme poids visuel :
   le refus doit etre aussi simple que l'acceptation. */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:140;max-width:560px;max-height:calc(100vh - 32px);overflow:auto;
  background:var(--ivory);color:var(--ink);border:1px solid var(--camel);padding:20px 22px;box-shadow:0 16px 44px rgba(23,17,13,.24)}
.consent-titre{font-family:var(--font-display);font-size:1.15rem;margin-bottom:6px}
.consent-texte{font-size:.86rem;line-height:1.6}
.consent-texte a{color:var(--wine);text-decoration:underline}
.consent-details{margin-top:12px;display:grid;gap:8px;font-size:.86rem}
.consent-details[hidden]{display:none}
.consent-details label{display:flex;align-items:center;gap:8px}
.consent-details .consent-btn{justify-self:start}
.consent-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.consent-btn{font:600 .86rem var(--font-body);min-height:44px;padding:0 18px;cursor:pointer;background:var(--espresso);color:var(--ivory);border:1px solid var(--espresso)}
.consent-lien,.consent-gerer{font:600 .86rem var(--font-body);min-height:44px;background:none;border:0;cursor:pointer;color:inherit;text-decoration:underline;text-underline-offset:3px}
.consent-gerer{padding:0}
@media (max-width:480px){.consent{left:8px;right:8px;bottom:8px;padding:16px}.consent-btn{flex:1 1 40%}}

/* Accueil en entonnoir (05/11/2026) : liste commune aux deux formats */
.v2-formats-commun{margin-top:clamp(28px,4vw,44px)}
.v2-formats-commun .v2-coche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px)}
@media(max-width:900px){.v2-formats-commun .v2-coche{grid-template-columns:1fr}}

/* Realisations : l'apercu defile sur la capture longue du vrai site (05/11/2026, moment 2 sur 3).
   L'image fixe reste dessous : sans JavaScript, ou en mouvement reduit, c'est elle qu'on voit. */
.v2-fenetre{position:relative;overflow:hidden;aspect-ratio:16/10}
.v2-fenetre>img{display:block}
.v2-navigateur .v2-fenetre img.long{position:absolute;top:0;left:0;width:100%;height:auto;aspect-ratio:auto;
  object-fit:fill;opacity:0;transition:opacity .6s var(--ease)}
.v2-fenetre.pret img.long{opacity:1}
.v2-fenetre.defile img.long{animation:v2-defile var(--duree,20s) ease-in-out 1s infinite alternate both}
.v2-fenetre:hover img.long,.v2-travaux.pause .v2-fenetre img.long{animation-play-state:paused}
@keyframes v2-defile{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(var(--fin,0))}}
@media (prefers-reduced-motion:reduce){.v2-fenetre img.long{display:none}}

/* Page Sites internet : chaque situation dit le format qui lui va (06/11/2026). */
.v2-situations .v2-format-conseil{margin-top:12px;font-weight:600;color:var(--wine);font-size:.9rem}

/* Relecture mobile du 06/11/2026.
   L'icone Instagram du pied de page restait collee au mot : sur mobile, .foot-links a passe en
   display:block (ligne 523) et le gap de .foot-ig ne s'appliquait plus. */
@media (max-width:900px){.foot-links a.foot-ig{display:inline-flex}}
/* Fil d'Ariane et adresses des realisations : 23 px de haut, sous le minimum de 24 px des cibles
   tactiles (WCAG 2.5.8). Un peu de marge interne, sans rien deplacer a l'ecran. */
.fil a,.v2-fil a,.v2-travail .bas a{display:inline-block;padding:3px 0}