/* =========================================================================
   KLARTEY STUDIO — refonte 2026
   Charte conservée : fond #fafaf6, encre #0a0a0a, or #c9a878, Fraunces + Inter.
   Parti pris : editorial studio. Filets fins plutot que cartes ombrees,
   composition asymetrique, mouvement reduit a un seul bandeau.
   ========================================================================= */

:root{
  --bg:#fafaf6;
  --paper:#ffffff;
  --ink:#0a0a0a;
  --ink-80:#2e2e2c;
  --muted:#6b6b6b;
  --dim:#a3a3a3;
  --line:#e7e5e0;
  --line-strong:#d8d5cd;
  --sand:#f0ebe0;
  --gold:#c9a878;
  --gold-soft:#f5ead4;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max:1200px;
  --gut:clamp(20px, 5vw, 56px);
  --rule:1px solid var(--line);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:500; letter-spacing:-.022em; line-height:1.08}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
em{font-style:italic}
::selection{background:var(--gold-soft); color:var(--ink)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Conserve pour les largeurs intermediaires. Sur telephone les tableaux ne
   glissent plus, ils se replient en cartes, voir la regle .cmp plus bas. */
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------- micro composants ---------- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted); margin-bottom:22px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold); flex:none}
.lede{font-size:clamp(15px,1.6vw,17px); color:var(--muted); max-width:56ch; line-height:1.72}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.01em;
  padding:15px 26px; border-radius:2px; border:1px solid transparent;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  white-space:nowrap;
}
.btn-solid{background:var(--ink); color:#fff}
.btn-solid:hover{background:#000; transform:translateY(-1px)}
.btn-line{border-color:var(--line-strong); color:var(--ink); background:transparent}
.btn-line:hover{border-color:var(--ink); background:var(--ink); color:#fff}

.sec{padding:clamp(70px,9vw,132px) 0; position:relative}
.sec + .sec{border-top:var(--rule)}
.sec-head{max-width:760px; margin-bottom:clamp(42px,5vw,72px)}
.sec-head h2{font-size:clamp(28px,4.4vw,50px); margin-bottom:20px}
.sec-head h2 em{font-style:italic}

/* ---------- entete ---------- */
.top{
  position:sticky; top:0; z-index:60; background:rgba(250,250,246,.86);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:var(--rule);
}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:74px}
.mark{display:flex; align-items:center; gap:11px; flex:none}
.mark svg{width:32px; height:32px}
.mark .nm{display:flex; flex-direction:column; line-height:1}
.mark .nm b{font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:-.02em}
.mark .nm i{font-style:normal; font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-top:4px}
.top-nav{display:flex; align-items:center; gap:30px}
.top-nav a{font-size:13.5px; color:var(--ink-80); position:relative; padding:4px 0}
.top-nav a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .3s ease}
.top-nav a:hover::after{width:100%}
.top-cta{font-size:13px; padding:11px 20px}
.burger{display:none; width:42px; height:42px; border:1px solid var(--line-strong); background:transparent; border-radius:2px; padding:0; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px}
.burger span{display:block; width:17px; height:1.4px; background:var(--ink); transition:transform .3s ease, opacity .2s ease}
.burger.on span:nth-child(1){transform:translateY(6.4px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg)}

.drawer{
  position:fixed; inset:74px 0 auto 0; background:var(--bg); border-bottom:var(--rule);
  z-index:55; padding:14px var(--gut) 30px; display:none; flex-direction:column;
}
.drawer.on{display:flex}
.drawer a{padding:16px 0; border-bottom:var(--rule); font-size:17px; font-family:var(--serif)}
.drawer .btn{margin-top:22px}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vw,108px) 0 clamp(46px,6vw,74px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(36px,6vw,80px); align-items:end}
.hero-pill{
  display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-80);
  border:1px solid var(--line-strong); border-radius:100px; padding:7px 15px; margin-bottom:30px;
}
.hero-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none}
.hero h1{font-size:clamp(42px,8.2vw,96px); line-height:.99; letter-spacing:-.035em; margin-bottom:30px}
.hero h1 em{font-style:italic; display:inline-block}
.hero-sub{font-size:clamp(16px,1.9vw,20px); color:var(--ink-80); max-width:47ch; line-height:1.6}
.hero-sub b{font-weight:500; font-family:var(--serif); font-style:italic}
.hero-act{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}

.spec{border-top:2px solid var(--ink)}
.spec dl{margin:0}
.spec .row{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:var(--rule)}
.spec dt{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.spec dd{margin:0; font-family:var(--serif); font-size:17px; font-weight:500; font-variant-numeric:tabular-nums}
/* Variante identite, pour les blocs juridiques ou la valeur est une phrase
   entiere plutot qu'un chiffre. L'etiquette passe au-dessus, la valeur occupe
   toute la largeur et se coupe proprement, ce qui evite tout debordement
   sur telephone avec des adresses ou des numeros de TVA. */
.spec.ident .row{display:block; padding:13px 0}
/* 12px est le plancher de lisibilite retenu pour tout le site, y compris pour
   les etiquettes en capitales des blocs d'identite. */
.spec.ident dt{display:block; margin-bottom:5px; font-size:12px}
.spec.ident dd{font-family:var(--sans); font-size:15px; font-weight:400;
  color:var(--ink-80); line-height:1.6; overflow-wrap:anywhere}
.spec.ident dd strong{font-weight:600; color:var(--ink)}
.spec.ident dd a{color:var(--ink); border-bottom:1px solid var(--line-strong);
  transition:color .25s ease, border-color .25s ease}
.spec.ident dd a:hover{color:var(--gold); border-bottom-color:var(--gold)}

.trust{display:flex; flex-wrap:wrap; gap:10px 34px; margin-top:clamp(40px,5vw,64px); padding-top:26px; border-top:var(--rule)}
.trust span{display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--muted)}
.trust svg{width:13px; height:13px; color:var(--gold); flex:none}

/* ---------- bandeau de confiance ---------- */
.band{border-top:var(--rule); border-bottom:var(--rule); background:var(--paper); padding:32px 0; overflow:hidden}
.band-lab{
  text-align:center; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); margin-bottom:24px;
}
.mq{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.mq-track{display:flex; width:max-content; animation:mq 52s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-set{display:flex; align-items:center; flex:none}
@keyframes mq{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}

/* ---------- pour qui ---------- */
.cols3{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.cols3 > div{padding:0 clamp(18px,2.4vw,34px); border-left:var(--rule)}
.cols3 > div:first-child{padding-left:0; border-left:0}
.cols3 > div:last-child{padding-right:0}
.num{font-family:var(--serif); font-size:12px; letter-spacing:.14em; color:var(--gold); font-variant-numeric:tabular-nums; display:block; margin-bottom:16px}
.cols3 h3{font-size:clamp(19px,2.2vw,24px); margin-bottom:14px}
.cols3 p{font-size:14.5px; color:var(--muted); line-height:1.7}
.tags{margin-top:18px; padding-top:16px; border-top:var(--rule); font-size:12px; letter-spacing:.05em; color:var(--dim)}

/* ---------- savoir-faire ---------- */
.craft{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:start}
.craft-list{border-top:2px solid var(--ink)}
.craft-list .it{display:grid; grid-template-columns:44px 1fr; gap:16px; padding:20px 0; border-bottom:var(--rule)}
.craft-list .k{font-family:var(--serif); font-size:12.5px; color:var(--gold); font-variant-numeric:tabular-nums; padding-top:3px}
.craft-list h3{font-size:17px; margin-bottom:6px; font-family:var(--sans); font-weight:600; letter-spacing:0}
.craft-list p{font-size:14px; color:var(--muted); line-height:1.65}
.pullquote{
  font-family:var(--serif); font-size:clamp(20px,2.7vw,30px); line-height:1.3;
  letter-spacing:-.02em; padding:0 0 0 26px; border-left:2px solid var(--gold);
}
.pullquote span{display:block; margin-top:20px; font-family:var(--sans); font-size:13px; letter-spacing:.06em; color:var(--muted)}

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:2px solid var(--ink)}
.steps .st{padding:28px clamp(16px,2.2vw,30px) 6px; border-left:var(--rule)}
.steps .st:first-child{border-left:0; padding-left:0}
.steps .st:last-child{padding-right:0}
.steps .day{font-size:12px; letter-spacing:.17em; text-transform:uppercase; color:var(--gold); margin-bottom:20px}
.steps h3{font-size:clamp(24px,3.2vw,34px); margin-bottom:14px; font-variant-numeric:tabular-nums}
.steps p{font-size:14px; color:var(--muted); line-height:1.68}
/* Sur la page process, chaque etape dit ce qu'on attend de la personne a ce
   moment precis. C'est l'information qu'elle cherche vraiment, donc elle se
   detache du paragraphe par un filet et une encre plus soutenue. */
.steps .att{margin-top:16px; padding-top:13px; border-top:var(--rule);
  color:var(--ink-80); font-size:13.5px}

/* ---------- comparatif ---------- */
.cmp{width:100%; border-collapse:collapse; font-size:14px; min-width:660px}
.cmp th,.cmp td{padding:16px 18px; text-align:left; border-bottom:var(--rule); vertical-align:middle}
.cmp thead th{font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:600; border-bottom:1.5px solid var(--ink)}
/* La premiere colonne nomme le critere compare, c'est un en-tete de ligne et
   non une donnee. Elle est donc balisee en th, et stylee comme la cellule
   d'origine pour que rien ne bouge a l'ecran. */
.cmp tbody td:first-child,.cmp tbody th{color:var(--ink-80); font-weight:500; font-size:14px}
.cmp td:not(:first-child){color:var(--muted)}
.cmp .hi{background:var(--sand)}
.cmp thead .hi{background:var(--ink); color:#fff; border-bottom-color:var(--ink)}
.cmp thead .hi .cn{display:block; font-family:var(--serif); font-size:16px; letter-spacing:-.01em; text-transform:none; color:#fff; margin-top:5px; font-weight:500}
.cmp thead .hi .bg{font-size:12px; letter-spacing:.12em; color:var(--gold)}
.cmp td.hi{color:var(--ink); font-weight:500}
.cmp .ok{color:var(--gold)}
.cmp .no{color:var(--dim)}

/* ---------- tarifs ---------- */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,34px)}
.plan{background:var(--paper); border:var(--rule); border-radius:3px; padding:clamp(28px,3.4vw,42px); display:flex; flex-direction:column}
.plan.feat{border-color:var(--ink); box-shadow:0 26px 70px rgba(10,10,10,.07)}
.plan-top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:6px}
.plan h3{font-size:26px}
.badge{font-size:12px; letter-spacing:.13em; text-transform:uppercase; background:var(--ink); color:#fff; padding:6px 11px; border-radius:100px; flex:none}
.plan .sub{font-size:13.5px; color:var(--muted); margin-bottom:26px}
.price{display:flex; align-items:baseline; gap:8px; font-family:var(--serif); font-variant-numeric:tabular-nums}
.price b{font-size:clamp(38px,5vw,54px); font-weight:500; letter-spacing:-.035em}
.price u{text-decoration:none; font-family:var(--sans); font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.price-ttc{font-size:14px; color:var(--muted); margin-top:6px; font-variant-numeric:tabular-nums}
.price-note{font-size:12px; color:var(--dim); margin-top:10px; padding-bottom:24px; border-bottom:var(--rule)}
.plan ul{margin:24px 0 30px; display:grid; gap:11px}
.plan li{position:relative; padding-left:22px; font-size:14px; color:var(--ink-80); line-height:1.6}
.plan li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; border:1px solid var(--gold)}
.plan li.on::before{background:var(--gold)}
.plan li em{color:var(--muted); font-style:normal; font-size:13px}
.plan .btn{margin-top:auto; width:100%}

.incl{margin-top:clamp(44px,5vw,70px); border-top:2px solid var(--ink); padding-top:clamp(34px,4vw,54px)}
.incl-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px)}
.incl h3{font-size:clamp(22px,2.8vw,30px); margin-bottom:24px}
.incl ul{display:grid; gap:12px}
.incl li{position:relative; padding-left:24px; font-size:14.5px; color:var(--ink-80); line-height:1.65}
.incl li::before{content:"✦"; position:absolute; left:0; top:0; color:var(--gold); font-size:11px}
.incl li span{display:block; font-size:13px; color:var(--dim); margin-top:3px}
/* Chapeau des deux formules de suivi, entre le titre et les cartes. */
.incl .sub-note{font-size:14px; color:var(--muted); line-height:1.7; margin:-8px 0 20px}
.opt{border:var(--rule); border-radius:3px; padding:22px; background:var(--paper); margin-bottom:16px}
.opt .on{font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.opt .op{font-family:var(--serif); font-size:28px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.opt .op i{font-style:normal; font-family:var(--sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-left:8px}
.opt .op u{display:block; text-decoration:none; font-family:var(--sans); font-size:12px; color:var(--dim); margin-top:4px; letter-spacing:0; text-transform:none}
.opt p{font-size:13.5px; color:var(--muted); margin-top:12px; line-height:1.65}
.opt .rec{margin-top:14px; padding-top:12px; border-top:var(--rule); font-size:12px; color:var(--gold)}
.foot-note{margin-top:26px; font-size:13px; color:var(--dim)}

/* ---------- avis ---------- */
.avis{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.avis .a{padding:0 clamp(18px,2.4vw,34px); border-left:var(--rule); display:flex; flex-direction:column}
.avis .a:first-child{padding-left:0; border-left:0}
.avis .a:last-child{padding-right:0}
.stars{color:var(--gold); font-size:12px; letter-spacing:.22em; margin-bottom:18px}
.avis q{quotes:none; font-family:var(--serif); font-size:clamp(16px,1.9vw,19px); line-height:1.5; letter-spacing:-.012em; color:var(--ink)}
.who{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:24px}
.who .av{width:38px; height:38px; border-radius:50%; background:var(--sand); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:12px; letter-spacing:.06em; font-weight:600; flex:none}
.who b{display:block; font-size:14px; font-weight:500}
.who i{font-style:normal; font-size:12.5px; color:var(--muted)}

/* ---------- faq ---------- */
.faq{border-top:2px solid var(--ink); max-width:880px}
.faq details{border-bottom:var(--rule)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative;
  font-family:var(--serif); font-size:clamp(16px,1.9vw,20px); letter-spacing:-.015em; line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:1.4px solid var(--ink); border-bottom:1.4px solid var(--ink);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s ease;
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq .ans{padding:0 40px 26px 0; font-size:14.5px; color:var(--muted); line-height:1.75}
.faq .ans strong{color:var(--ink-80); font-weight:500}

/* ---------- cta final ---------- */
.final{background:var(--ink); color:#fff; border-top:0}
.final .eyebrow{color:rgba(255,255,255,.6)}
.final h2{font-size:clamp(30px,5vw,58px); color:#fff; margin-bottom:24px}
.final h2 em{font-style:italic; color:var(--gold)}
.final .lede{color:rgba(255,255,255,.66)}
.final-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(36px,6vw,80px); align-items:end}
.final .btn-solid{background:#fff; color:var(--ink)}
.final .btn-solid:hover{background:var(--gold-soft)}
.final .btn-line{border-color:rgba(255,255,255,.28); color:#fff}
.final .btn-line:hover{background:#fff; color:var(--ink); border-color:#fff}
.final .spec{border-top-color:#fff}
.final .spec .row{border-bottom-color:rgba(255,255,255,.14)}
.final .spec dt{color:rgba(255,255,255,.55)}
.final .spec dd{color:#fff}
.final-mail{margin-top:34px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); font-size:14px; color:rgba(255,255,255,.6)}
.final-mail a{color:var(--gold); border-bottom:1px solid rgba(201,168,120,.4); padding-bottom:2px}

/* ---------- pied ---------- */
.bot{background:var(--ink); color:rgba(255,255,255,.62); padding:clamp(52px,6vw,84px) 0 40px; border-top:1px solid rgba(255,255,255,.12)}
.bot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(26px,4vw,54px)}
.bot .mark{color:#fff}
.bot .mark .nm i{color:rgba(255,255,255,.5)}
.bot-brand p{font-size:13.5px; margin-top:18px; max-width:32ch; line-height:1.7}
.bot h4{font-family:var(--sans); font-size:12px; letter-spacing:.17em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:16px; font-weight:600}
.bot li{margin-bottom:10px}
.bot li a{font-size:13.5px; transition:color .2s ease}
.bot li a:hover{color:var(--gold)}
.bot-end{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:clamp(40px,5vw,64px); padding-top:26px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px}
.bot-end a:hover{color:var(--gold)}

/* ---------- apparition ---------- */
.rv{opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid,.final-grid{grid-template-columns:1fr; align-items:stretch}
  .spec{margin-top:8px}
  .craft{grid-template-columns:1fr}
  .pullquote{order:-1}
  .steps{grid-template-columns:1fr 1fr}
  .steps .st{border-left:var(--rule); padding-left:clamp(16px,2.2vw,30px)}
  .steps .st:nth-child(odd){border-left:0; padding-left:0}
  .steps .st:nth-child(1),.steps .st:nth-child(2){padding-bottom:26px; border-bottom:var(--rule)}
  .steps .st:nth-child(3),.steps .st:nth-child(4){padding-top:26px}
  .bot-grid{grid-template-columns:1fr 1fr}
  .incl-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .top-nav{display:none}
  .top-cta{display:none}
  .burger{display:flex}
  .cols3,.avis{grid-template-columns:1fr}
  .cols3 > div,.avis .a{border-left:0; border-top:var(--rule); padding:28px 0 0}
  .cols3 > div:first-child,.avis .a:first-child{border-top:0; padding-top:0}
  .avis .a{padding-bottom:28px}
  .avis .a:last-child{padding-bottom:0}
  .who{padding-top:18px}
  .plans{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero h1{font-size:clamp(36px,11.5vw,52px)}
  .hero-act{flex-direction:column; align-items:stretch}
  .hero-act .btn{width:100%}
  .steps{grid-template-columns:1fr}
  .steps .st{border-left:0; padding:24px 0; border-bottom:var(--rule)}
  .steps .st:first-child{padding-top:24px}
  .steps .st:last-child{border-bottom:0}
  .steps .st:nth-child(odd),.steps .st:nth-child(even){padding-left:0; padding-right:0}
  .bot-grid{grid-template-columns:1fr}
  .bot-end{justify-content:flex-start; gap:12px}
  .final .btn,.plan .btn{width:100%}
  .final-act{flex-direction:column; align-items:stretch}
}
/* ================= COUCHE FINITION ================= */

/* Grain papier. C'est ce qui donne la matiere d'un vrai tirage
   et enleve l'aspect ecran plat des pages generees. */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.028; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Filet de progression de lecture */
.prog{position:fixed; top:0; left:0; height:2px; width:100%; z-index:100; pointer-events:none;
  transform:scaleX(0); transform-origin:0 50%; background:var(--gold); transition:transform .1s linear}

/* L'entete se resserre des qu'on scrolle */
.top{transition:height .3s ease, box-shadow .35s ease, background .3s ease}
.top-in{transition:height .3s ease}
.top.scrolled{box-shadow:0 1px 0 var(--line-strong), 0 10px 30px -22px rgba(10,10,10,.5)}
/* On ne resserre que sur grand ecran : au telephone le tiroir est cale sur 74px. */
@media (min-width:861px){ .top.scrolled .top-in{height:62px} }

/* Equilibrage typographique */
h1,h2{text-wrap:balance}
.lede,.hero-sub{text-wrap:pretty}
h1,h2,h3,.mq-set .nom,.spec dd{font-optical-sizing:auto; font-variation-settings:"SOFT" 0}

/* Index de section en chiffres romains */
.eyebrow .idx{font-family:var(--serif); font-size:13px; letter-spacing:.04em; text-transform:none;
  color:var(--gold); font-style:italic; margin-right:2px}

/* Caption studio en haut de la colonne de droite du hero */
.hero-side{display:flex; flex-direction:column; gap:26px; justify-content:flex-end}
.hero-cap{font-size:12.5px; line-height:1.7; color:var(--muted); border-left:1px solid var(--gold); padding-left:14px}
.hero-cap b{display:block; font-family:var(--serif); font-size:15px; font-weight:500; color:var(--ink); margin-bottom:3px}

/* Bandeau : nom en serif, metier en petites capitales */
.mq-set .it{display:flex; align-items:center; gap:clamp(16px,2.4vw,30px); padding:0 clamp(18px,2.6vw,34px); white-space:nowrap}
.mq-set .nom{display:flex; flex-direction:column; line-height:1.25}
.mq-set .nom b{font-family:var(--serif); font-size:clamp(17px,2.1vw,23px); font-weight:500; letter-spacing:-.015em; color:var(--ink)}
.mq-set .nom span{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:5px}
.mq-set .sep{color:var(--gold); font-size:10px; opacity:.9}

/* Maillage interne en pied de page. Deux colonnes de liens discrets,
   assez petits pour ne pas concurrencer le pied principal mais bien reels. */
.bot-seo{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(28px,5vw,64px);
  margin-top:clamp(38px,5vw,58px); padding-top:clamp(28px,4vw,40px);
  border-top:1px solid rgba(255,255,255,.09)}
.bot-seo h4{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin:0 0 16px}
/* Pas de barre de separation : elle laisse un trait orphelin en fin de ligne
   quand la liste passe a la ligne. On espace, c'est plus propre et plus edito. */
.seo-links{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:11px 24px}
.seo-links a{display:inline-block; font-size:13px; line-height:1.5; color:rgba(255,255,255,.62);
  text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .25s ease, border-color .25s ease}
.seo-links a:hover{color:var(--gold); border-bottom-color:rgba(201,168,120,.5)}
@media (max-width:860px){
  .bot-seo{grid-template-columns:1fr; gap:30px}
}

/* Soulignement des liens de contenu */
.lede a,.final-mail a,.bot a:not(.mark){background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s ease}
.lede a:hover,.final-mail a:hover,.bot a:not(.mark):hover{background-size:100% 1px}

/* ---------- Tableaux replies en cartes sur telephone ----------------------
   Un comparatif a quatre colonnes reclame 660 px. Un iPhone en offre 350. La
   version precedente le faisait glisser lateralement, avec la premiere colonne
   figee : techniquement propre, commercialement absurde. La colonne Klartey est
   la troisieme, donc le visiteur arrivait sur « agence classique », lisait
   « 3 000 a 8 000 € HT », et repartait sans avoir jamais vu notre colonne.
   L'argument central de la page etait cache derriere un geste que presque
   personne ne fait.

   Ici le tableau se replie : une carte par critere, le critere en titre, les
   trois reponses l'une sous l'autre. Chaque reponse porte le nom de sa colonne,
   recopie dans data-col par le script data-colonnes.js, sans quoi « 1 semaine »
   ne dirait plus de qui on parle. Rien a faire glisser, la ligne Klartey est
   visible d'emblee et surlignee.

   Le tableau reste un vrai tableau pour le lecteur d'ecran et pour Google :
   on ne change que la mise en page, pas le balisage. */
@media (max-width:860px){
  .cmp{min-width:0; display:block; font-size:15px}
  .cmp thead{display:none}
  .cmp tbody{display:block}
  .cmp tbody tr{display:block; border:var(--rule); border-radius:3px;
    background:var(--bg); margin:0 0 12px; overflow:hidden}
  .cmp tbody tr:last-child{margin-bottom:0}
  .cmp tbody tr > *{display:block; border-bottom:0; padding:0}

  /* Le critere, en tete de carte. */
  .cmp tbody tr > *:first-child{padding:12px 16px; background:var(--paper);
    border-bottom:var(--rule); font-family:var(--sans); font-size:12px;
    font-weight:600; letter-spacing:.11em; text-transform:uppercase;
    color:var(--muted)}

  /* Les reponses. Etiquette a gauche, valeur a droite, comme une fiche. */
  .cmp tbody td[data-col]{display:flex; align-items:baseline; gap:16px;
    justify-content:space-between; padding:11px 16px; border-bottom:var(--rule);
    font-size:15px; text-align:right; color:var(--muted)}
  .cmp tbody tr > *:last-child{border-bottom:0}
  .cmp tbody td[data-col]::before{content:attr(data-col); flex:0 1 auto;
    text-align:left; font-family:var(--sans); font-size:12.5px; font-weight:600;
    letter-spacing:.02em; color:var(--dim); text-transform:none}
  .cmp tbody td.hi{background:var(--sand); color:var(--ink); font-weight:500}
  .cmp tbody td.hi::before{color:var(--ink-80)}
}

@media (max-width:860px){
  .hero-side{gap:20px}
  .hero-cap{border-left:0; border-top:1px solid var(--gold); padding:14px 0 0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
  .prog{display:none}
}

/* ============================================================================
   COUCHE PAGES METIER ET ARTICLES
   Ajoutee au design system partage. Aucune regle existante n'est modifiee.
   Toutes les tailles de texte restent >= 12px (controle automatise).
   ============================================================================ */

/* Fil d'Ariane. Discret, mais lu par Google via le JSON-LD BreadcrumbList. */
.crumb{font-size:12.5px; color:var(--dim); margin-bottom:clamp(22px,3vw,34px)}
.crumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.crumb li{display:flex; align-items:center; gap:8px}
.crumb li + li::before{content:"/"; color:var(--line-strong)}
.crumb a{color:var(--muted); transition:color .25s ease}
.crumb a:hover{color:var(--gold)}
.crumb [aria-current]{color:var(--ink-80)}

/* Hero des pages metier. Texte a gauche, visuel a droite, comme une couverture. */
.mh{padding:clamp(40px,6vw,72px) 0 clamp(50px,6vw,84px)}
.mh-grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(34px,5vw,70px); align-items:center}
.mh h1{font-size:clamp(34px,5.6vw,66px); line-height:1.03; letter-spacing:-.032em; margin-bottom:24px}
.mh h1 em{font-style:italic}
.mh .lede{font-size:clamp(15px,1.7vw,17.5px); max-width:52ch}
.mh-media{position:relative; border-radius:3px; overflow:hidden; background:var(--sand);
  aspect-ratio:4/3; border:var(--rule)}
.mh-media img{width:100%; height:100%; object-fit:cover}
/* Voile leger pour que la photo reste dans la charte et ne crie pas plus fort que le titre. */
.mh-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(250,250,246,.10) 0%, rgba(10,10,10,.06) 100%); pointer-events:none}

/* Bandeau de reperes chiffres sous le hero. */
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:clamp(38px,5vw,58px); padding-top:28px; border-top:2px solid var(--ink)}
.facts > div{padding:0 clamp(16px,2.2vw,30px); border-left:var(--rule)}
.facts > div:first-child{padding-left:0; border-left:0}
.facts b{display:block; font-family:var(--serif); font-size:clamp(24px,3vw,34px);
  font-weight:500; letter-spacing:-.02em; margin-bottom:6px}
.facts span{font-size:13px; color:var(--muted); line-height:1.6; display:block}

/* Grilles editoriales des sections metier. Cellules separees par des filets. */
.g4,.g6{display:grid; gap:0}
.g4{grid-template-columns:repeat(4,1fr)}
.g6{grid-template-columns:repeat(3,1fr)}
.g4 > div,.g6 > div{padding:clamp(24px,2.6vw,34px) clamp(16px,2vw,28px);
  border-top:var(--rule); border-left:var(--rule)}
.g4 > div:nth-child(4n+1),.g6 > div:nth-child(3n+1){border-left:0; padding-left:0}
.g4 > div:nth-child(-n+4),.g6 > div:nth-child(-n+3){border-top:2px solid var(--ink)}
.g4 .k,.g6 .k{font-family:var(--serif); font-size:12.5px; letter-spacing:.12em; color:var(--gold);
  font-variant-numeric:tabular-nums; display:block; margin-bottom:14px}
.g4 h3,.g6 h3{font-family:var(--sans); font-weight:600; letter-spacing:0;
  font-size:16px; line-height:1.35; margin-bottom:10px}
.g4 p,.g6 p{font-size:14px; color:var(--muted); line-height:1.7; margin:0}

/* Section illustree en deux temps. Image d'un cote, propos de l'autre. */
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px); align-items:center}
.duo-media{border-radius:3px; overflow:hidden; border:var(--rule); background:var(--sand); aspect-ratio:5/4}
.duo-media img{width:100%; height:100%; object-fit:cover}
.duo p{font-size:15px; color:var(--muted); line-height:1.75; margin:0 0 16px; max-width:54ch}
.duo h2{font-size:clamp(26px,3.6vw,42px); margin-bottom:20px}
.duo h2 em{font-style:italic}

/* Bloc referencement. La profondeur editoriale qui fait remonter la page. */
.local{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(32px,5vw,70px); align-items:start}
.local h2{font-size:clamp(26px,3.6vw,42px); margin-bottom:26px}
.local h2 em{font-style:italic}
.local p{font-size:15px; color:var(--muted); line-height:1.8; margin:0 0 18px; max-width:62ch}
.local p:last-child{margin-bottom:0}
.local-aside{background:var(--paper); border:var(--rule); border-radius:3px;
  padding:clamp(24px,2.8vw,32px); position:sticky; top:100px}
.local-aside h3{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin-bottom:18px}
.local-aside ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.local-aside li{font-size:13.5px; color:var(--ink-80); line-height:1.55;
  padding-left:20px; position:relative}
.local-aside li::before{content:"✦"; position:absolute; left:0; top:1px; color:var(--gold); font-size:10px}
.local-aside .note{margin-top:20px; padding-top:16px; border-top:var(--rule);
  font-size:12.5px; color:var(--dim); line-height:1.6}

/* Maillage de fin de page. Metiers voisins puis articles. */
.rel{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,26px)}
.rel a{display:block; background:var(--paper); border:var(--rule); border-radius:3px;
  padding:clamp(22px,2.4vw,28px); transition:border-color .3s ease, transform .3s ease}
.rel a:hover{border-color:var(--ink); transform:translateY(-2px)}
.rel .k{font-family:var(--serif); font-size:12px; letter-spacing:.12em; color:var(--gold); display:block; margin-bottom:12px}
.rel h3{font-family:var(--serif); font-size:20px; font-weight:500; margin-bottom:8px}
.rel p{font-size:13.5px; color:var(--muted); line-height:1.6; margin:0}
.rel-arts{margin-top:clamp(26px,3vw,36px); padding-top:clamp(22px,2.6vw,30px); border-top:var(--rule);
  display:flex; flex-wrap:wrap; gap:12px 30px; align-items:baseline}
.rel-arts b{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim)}
.rel-arts a{font-size:14px; color:var(--ink-80); border-bottom:1px solid var(--line-strong);
  padding-bottom:2px; transition:color .25s ease, border-color .25s ease}
.rel-arts a:hover{color:var(--gold); border-bottom-color:var(--gold)}

/* Tarifs condenses sur les pages metier. */
.mini{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,32px)}
.mini .plan h3{font-size:23px}

/* ---- Articles du journal ---- */
.art{max-width:760px; margin:0 auto}
.art-head{padding:clamp(36px,5vw,64px) 0 0}
.art-meta{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:12.5px; color:var(--dim);
  margin-bottom:22px; align-items:center}
.art-meta time{color:var(--muted)}
.art h1{font-size:clamp(32px,5vw,58px); line-height:1.05; letter-spacing:-.03em; margin-bottom:24px}
.art h1 em{font-style:italic}
.toc{background:var(--paper); border:var(--rule); border-radius:3px;
  padding:clamp(22px,2.6vw,30px); margin:clamp(34px,4vw,50px) 0}
/* Les pages legales titrent leur sommaire en h2 parce qu'il ouvre le document.
   Ailleurs le sommaire n'est qu'un raccourci, pas une section, donc il porte un
   simple paragraphe qui reprend exactement la meme apparence. */
.toc h2,.toc .toc-t{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin:0 0 16px}
.toc ol{margin:0; padding-left:20px; display:grid; gap:2px}
.toc li{font-size:14px; color:var(--ink-80); line-height:1.55}
/* Le sommaire est le premier element qu'on touche sur telephone. Les entrees
   passent en bloc avec du rembourrage vertical pour offrir une zone de contact
   confortable au pouce, au lieu d'un lien de la hauteur d'une ligne. */
.toc a{display:block; padding:8px 0; border-bottom:1px solid transparent;
  transition:border-color .25s ease, color .25s ease}
.toc a:hover{color:var(--gold); border-bottom-color:var(--gold)}
.prose h2{font-size:clamp(24px,3.2vw,34px); margin:clamp(44px,5vw,64px) 0 20px; scroll-margin-top:96px}
.prose h2 em{font-style:italic}
.prose h3{font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:0;
  margin:32px 0 12px; scroll-margin-top:96px}
/* Les pages legales portent des adresses email et des URL entieres, qui sont
   des mots insecables plus larges qu'un ecran de telephone. On autorise la
   coupure partout dans le corps de texte, sinon le document deborde. */
.prose p,.prose li,.prose dd,.prose td{overflow-wrap:anywhere}
.prose p{font-size:16px; color:var(--ink-80); line-height:1.82; margin:0 0 20px}
.prose ul{margin:0 0 22px; padding:0; list-style:none; display:grid; gap:11px}
.prose li{position:relative; padding-left:24px; font-size:15.5px; color:var(--ink-80); line-height:1.7}
.prose li::before{content:"✦"; position:absolute; left:0; top:2px; color:var(--gold); font-size:11px}
.prose strong{font-weight:600; color:var(--ink)}
.prose a{color:var(--ink); background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%}
.prose .callout{background:var(--paper); border-left:2px solid var(--gold); border-radius:0 3px 3px 0;
  padding:clamp(20px,2.4vw,26px); margin:0 0 24px}
.prose .callout p{margin:0; font-size:15px; color:var(--ink-80)}
.prose table{width:100%; border-collapse:collapse; margin:0 0 26px; font-size:14px}
.prose th,.prose td{text-align:left; padding:13px 14px; border-bottom:var(--rule); vertical-align:top}
.prose thead th{border-bottom:2px solid var(--ink); font-family:var(--sans); font-size:12px;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.prose td:first-child{color:var(--ink); font-weight:500}
/* Les listes numerotees gardent leurs chiffres, le losange est reserve aux puces. */
.prose ol{margin:0 0 22px; padding-left:22px; display:grid; gap:12px; list-style:decimal}
.prose ol li{padding-left:6px}
.prose ol li::before{content:none}
.prose ol li::marker{color:var(--gold); font-weight:600}
/* Etiquette de rubrique dans le bandeau meta de l'article. */
.art-cat{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold)}
/* Les tableaux glissent horizontalement sur telephone plutot que de casser la page.
   Les ombres laterales n'apparaissent que du cote ou il reste du contenu a voir,
   grace au background-attachment local qui suit le defilement interne. */
.prose .scroll-x{margin:0 0 26px;
  background-image:
    linear-gradient(to right, var(--bg) 40%, rgba(250,250,246,0)),
    linear-gradient(to left,  var(--bg) 40%, rgba(250,250,246,0)),
    radial-gradient(farthest-side at 0 50%, rgba(10,10,10,.13), rgba(10,10,10,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(10,10,10,.13), rgba(10,10,10,0));
  background-position:0 0, 100% 0, 0 0, 100% 0;
  background-repeat:no-repeat;
  background-size:34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-attachment:local, local, scroll, scroll}
.prose .scroll-x table{margin:0; min-width:520px}
/* Les tableaux des articles se replient aussi, mais autrement : leurs cellules
   contiennent des phrases entieres, pas des chiffres. Une etiquette a gauche et
   une valeur a droite ecraserait le texte sur quatre lignes. On empile donc
   l'etiquette au dessus de sa reponse. */
@media (max-width:600px){
  .prose .scroll-x{background:none; overflow-x:visible; margin:0 0 26px}
  .prose .scroll-x table,.prose table{min-width:0; display:block}
  .prose table thead{display:none}
  .prose table tbody{display:block}
  .prose table tbody tr{display:block; border:var(--rule); border-radius:3px;
    background:var(--bg); margin:0 0 12px; padding:0; overflow:hidden}
  .prose table tbody tr:last-child{margin-bottom:0}
  .prose table tbody tr > *{display:block; border-bottom:0; padding:12px 15px}
  .prose table tbody tr > *:first-child{background:var(--paper);
    border-bottom:var(--rule); font-family:var(--sans); font-size:12px;
    font-weight:600; letter-spacing:.11em; text-transform:uppercase;
    color:var(--muted)}
  .prose table tbody td[data-col]{border-bottom:var(--rule); font-size:14.5px}
  .prose table tbody tr > *:last-child{border-bottom:0}
  .prose table tbody td[data-col]::before{content:attr(data-col); display:block;
    margin-bottom:5px; font-family:var(--sans); font-size:11.5px; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
}
.art-foot{margin:clamp(46px,5vw,66px) 0 0; padding-top:clamp(26px,3vw,34px); border-top:2px solid var(--ink)}
.art-foot .eyebrow{margin-bottom:18px}

/* ---- Index du journal. Liste editoriale, une ligne par article. ---- */
.jnl{border-top:2px solid var(--ink)}
.jnl a{display:grid; grid-template-columns:158px 1fr 120px; gap:clamp(18px,3vw,40px);
  align-items:start; padding:clamp(24px,3vw,32px) clamp(0px,1.4vw,18px);
  border-bottom:var(--rule); text-decoration:none; color:inherit;
  transition:background .3s ease, padding .3s ease}
.jnl a:hover{background:var(--paper)}
.jnl .jc{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold)}
.jnl .jd{display:block; margin-top:9px; font-family:var(--sans); font-size:13px; color:var(--dim)}
.jnl h2{font-family:var(--serif); font-size:clamp(20px,2.2vw,26px); font-weight:500;
  line-height:1.24; letter-spacing:-.012em; margin:0 0 11px; color:var(--ink)}
.jnl h2 em{font-style:italic; color:var(--muted)}
.jnl p{margin:0; font-size:15px; line-height:1.66; color:var(--muted); max-width:62ch}
.jnl .jr{font-family:var(--sans); font-size:13px; color:var(--dim); text-align:right; white-space:nowrap}
.jnl .jr .ar{display:block; margin-top:10px; font-size:15px; color:var(--ink);
  opacity:0; transform:translateX(-6px); transition:opacity .3s ease, transform .3s ease}
.jnl a:hover .jr .ar{opacity:1; transform:none}
@media (max-width:860px){
  .jnl a{grid-template-columns:1fr; gap:12px; padding-left:0; padding-right:0}
  .jnl .jd{display:inline; margin:0 0 0 12px}
  .jnl .jr{text-align:left}
  .jnl .jr .ar{display:none}
}

/* ---- Adaptations tablette et telephone ---- */
@media (max-width:1000px){
  .mh-grid{grid-template-columns:1fr; gap:clamp(28px,4vw,40px)}
  .mh-media{aspect-ratio:16/10; order:-1}
  .local{grid-template-columns:1fr; gap:34px}
  .local-aside{position:static}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g4 > div:nth-child(4n+1){border-left:var(--rule); padding-left:clamp(16px,2vw,28px)}
  .g4 > div:nth-child(2n+1){border-left:0; padding-left:0}
  .g4 > div:nth-child(-n+4){border-top:var(--rule)}
  .g4 > div:nth-child(-n+2){border-top:2px solid var(--ink)}
  .duo{grid-template-columns:1fr; gap:30px}
  .duo-media{aspect-ratio:16/10}
  .rel{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .g6{grid-template-columns:repeat(2,1fr)}
  .g6 > div:nth-child(3n+1){border-left:var(--rule); padding-left:clamp(16px,2vw,28px)}
  .g6 > div:nth-child(2n+1){border-left:0; padding-left:0}
  .g6 > div:nth-child(-n+3){border-top:var(--rule)}
  .g6 > div:nth-child(-n+2){border-top:2px solid var(--ink)}
  .facts{grid-template-columns:1fr; gap:0}
  .facts > div{border-left:0; padding:16px 0; border-top:var(--rule)}
  .facts > div:first-child{border-top:0; padding-top:0}
  .mini{grid-template-columns:1fr}
}
@media (max-width:560px){
  .g4,.g6{grid-template-columns:1fr}
  .g4 > div,.g6 > div{border-left:0 !important; padding-left:0 !important;
    border-top:var(--rule) !important; padding-right:0}
  .g4 > div:first-child,.g6 > div:first-child{border-top:2px solid var(--ink) !important}
  .rel{grid-template-columns:1fr}
  .prose p{font-size:15.5px}
}

/* =========================================================================
   BRIEF — le formulaire en cinq etapes
   C'est la seule page du site ou le visiteur produit quelque chose plutot
   que de lire. Le parti pris editorial tient quand meme : filets fins,
   pas d'ombre portee, une seule couleur d'accent pour dire ou on en est.
   Tout est ici plutot que dans une balise style de la page, parce que le
   controle refuse le style en ligne sur toutes les pages du lot.
   ========================================================================= */
/* Attention : cette classe est posee sur le meme element que .wrap et la regle
   arrive plus bas dans le fichier. Un raccourci `padding` avec 0 sur les cotes
   ecrase donc la gouttiere de .wrap et colle toute la page aux bords, ce qui
   fait deborder le bandeau de progression sur mobile. On repete var(--gut). */
.bf-wrap{padding:clamp(30px,4vw,54px) var(--gut) clamp(70px,8vw,110px)}
.bf-head{max-width:64ch; margin-bottom:clamp(38px,5vw,60px)}
.bf-head h1{font-size:clamp(32px,5.2vw,60px); line-height:1.03;
  letter-spacing:-.032em; margin-bottom:22px}
.bf-head h1 em{font-style:italic}
.bf{display:grid; grid-template-columns:240px minmax(0,1fr);
  gap:clamp(34px,5vw,72px); align-items:start}

/* ---- rail de progression ---- */
/* Colle sous l'entete, qui fait 74px, plus une respiration. */
.bf-rail{position:sticky; top:98px}
.bf-rail .hd{font-size:12px; font-family:var(--sans); font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--muted); margin-bottom:18px}
.bf-rail ol{list-style:none; margin:0; padding:0; border-top:2px solid var(--ink)}
.bf-step{display:flex; align-items:flex-start; gap:12px; padding:14px 0;
  border-bottom:var(--rule); font-size:14px; color:var(--dim);
  transition:color .3s ease; background:none; border-left:0; border-right:0; border-top:0;
  width:100%; text-align:left; font-family:var(--sans); cursor:default; -webkit-appearance:none;
  appearance:none;}
.bf-step .n{flex:none; width:22px; font-variant-numeric:tabular-nums;
  font-size:12px; letter-spacing:.1em; padding-top:2px}
.bf-step .t{line-height:1.45}
.bf-step.done{color:var(--muted); cursor:pointer}
.bf-step.done .n::after{content:" \2713"; color:var(--gold)}
.bf-step.on{color:var(--ink)}
.bf-step.on .t{font-family:var(--serif); font-size:16px; font-weight:500}
.bf-step.on .n{color:var(--gold)}

.bf-bar{height:2px; background:var(--line); margin-top:22px; overflow:hidden}
.bf-bar i{display:block; height:100%; width:20%; background:var(--gold);
  transition:width .45s cubic-bezier(.16,1,.3,1)}
.bf-pct{display:flex; justify-content:space-between; gap:10px;
  margin-top:10px; font-size:12px; letter-spacing:.06em; color:var(--dim)}

/* Resume compact, affiche seulement quand le rail passe en bandeau. */
.bf-mob{display:none}

/* ---- panneaux ---- */
.bf-panel{display:none}
.bf-panel.on{display:block}
.bf-panel > .eyebrow{margin-bottom:18px}
.bf-panel h2{font-size:clamp(24px,3.4vw,38px); line-height:1.12; margin-bottom:16px}
.bf-panel h2 em{font-style:italic}
.bf-panel > .lede{margin-bottom:clamp(28px,3.5vw,40px)}

.bf-field{margin-bottom:26px}
.bf-field > label,.bf-lab{display:block; font-size:13px; font-weight:500;
  letter-spacing:.02em; color:var(--ink-80); margin-bottom:9px}
/* Cette mention s'appelait .opt, comme les cartes de prix de la page tarifs
   (ligne 252 : bordure, fond, 22px de padding). Le petit « (optionnel) » posé
   dans un label heritait donc d'un style de carte et s'affichait en cartouche
   blanc decale par dessus le champ du dessus. Nom dedie, plus de collision. */
.bf-lab .bf-opt{font-weight:400; color:var(--dim)}
.bf-lab .req{color:var(--gold); margin-left:2px}
.bf-help{font-size:12.5px; color:var(--dim); margin-top:8px; line-height:1.6}

/* 16px minimum sur les champs, sinon iOS zoome a la mise au point et le
   visiteur se retrouve avec la page decalee sur le cote. */
.bf-in{display:block; width:100%; font-family:var(--sans); font-size:16px;
  line-height:1.5; color:var(--ink); background:var(--paper);
  border:1px solid var(--line-strong); border-radius:2px; padding:13px 15px;
  transition:border-color .25s ease}
.bf-in::placeholder{color:var(--dim)}
.bf-in:focus{outline:none; border-color:var(--ink)}
.bf-in.bad{border-color:#b0342c}
textarea.bf-in{resize:vertical; min-height:104px}
select.bf-in{-webkit-appearance:none; appearance:none; padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6b6b' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:11px}

.bf-err{display:none; font-size:12.5px; color:#b0342c; margin-top:7px}
.bf-err.on{display:block}

/* ---- choix en cartes ---- */
.bf-choices{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px}
.bf-choices.duo2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.bf-choice{position:relative; display:block; border:1px solid var(--line-strong);
  border-radius:2px; padding:15px 17px; cursor:pointer; background:var(--paper);
  transition:border-color .25s ease, box-shadow .25s ease}
.bf-choice:hover{border-color:var(--ink-80)}
.bf-choice input{position:absolute; width:1px; height:1px; opacity:0; margin:0}
.bf-choice b{display:block; font-family:var(--serif); font-size:16px; font-weight:500;
  letter-spacing:-.01em; line-height:1.25}
.bf-choice span{display:block; font-size:12.5px; color:var(--muted);
  margin-top:5px; line-height:1.5}
.bf-choice.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.bf-choice.on b::after{content:" \2726"; color:var(--gold); font-size:12px}
.bf-choice input:focus-visible + b{outline:2px solid var(--gold); outline-offset:3px}

/* Le champ d'URL n'apparait que si le visiteur a coche « refonte ». */
.bf-cond{display:none; margin-top:20px; padding:18px 20px;
  background:var(--sand); border-left:2px solid var(--gold)}
.bf-cond.on{display:block}
.bf-cond .bf-note{font-size:13px; color:var(--ink-80); margin-top:14px; line-height:1.65}

/* ---- consentement ---- */
.bf-rgpd{display:flex; align-items:flex-start; gap:11px; font-size:13px;
  color:var(--muted); line-height:1.6; cursor:pointer; margin-top:6px}
.bf-rgpd input{flex:none; width:17px; height:17px; margin-top:2px; accent-color:var(--gold)}
.bf-rgpd a{color:var(--ink-80); border-bottom:1px solid var(--line-strong)}
.bf-rgpd a:hover{color:var(--gold); border-bottom-color:var(--gold)}

/* ---- navigation ---- */
.bf-nav{display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:clamp(30px,4vw,42px); padding-top:26px; border-top:var(--rule)}
.bf-nav .btn{min-height:48px}
.bf-back{visibility:hidden}
.bf-nav.step1 .bf-back{visibility:hidden}
.bf-save{margin-top:20px; font-size:12.5px; color:var(--dim); line-height:1.6}

/* ---- ecran de confirmation ---- */
.bf-done{display:none; border-top:2px solid var(--ink); padding-top:clamp(30px,4vw,44px)}
.bf-done.on{display:block}
.bf-done .sig{font-family:var(--serif); font-size:34px; color:var(--gold); line-height:1}
.bf-done h2{font-size:clamp(26px,3.8vw,42px); margin:20px 0 18px}
.bf-done h2 em{font-style:italic}
.bf-done .lede{margin-bottom:30px}

/* ---- adaptations ---- */
@media (max-width:960px){
  .bf{display:block}
  /* Le rail devient un bandeau colle sous l'entete. Les marges negatives le
     font toucher les deux bords, sinon le filet du bas s'arrete avant. */
  .bf-rail{position:sticky; top:74px; z-index:50; background:var(--bg);
    margin:0 calc(var(--gut) * -1) clamp(28px,4vw,38px);
    padding:13px var(--gut) 15px; border-bottom:var(--rule)}
  .bf-rail .hd,.bf-rail ol{display:none}
  .bf-mob{display:flex; align-items:baseline; justify-content:space-between; gap:14px}
  .bf-mob .t{font-family:var(--serif); font-size:16px; font-weight:500;
    letter-spacing:-.01em; line-height:1.2}
  .bf-mob .c{flex:none; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--muted)}
  .bf-bar{margin-top:12px}
  .bf-pct{display:none}
}
@media (max-width:560px){
  .bf-choices,.bf-choices.duo2{grid-template-columns:1fr}
  .bf-nav .btn{flex:1 1 0; padding-left:14px; padding-right:14px}
}