/* Blog (index /blog/ et articles /blog/<slug>) — styles propres, préfixe tb-. Chargé avant commun.css.
   Contrastes calculés le 13/10/2026 (WCAG) :
   blanc / ardoise #223D4D = 11,4:1 ; #FFB765 / #223D4D = 6,63:1 ; #162A35 / #E58D32 = 5,78:1 ;
   #162A35 / #FFB765 = 8,62:1 ; #9A4D00 / blanc = 6,11:1 ; #9A4D00 / #eef4f9 = 5,5:1 ;
   --texte #14212e / #fbfcfd = 16:1 ; --texte-doux #4a5767 / #fbfcfd = 7,4:1 ; / #eef4f9 = 6,65:1.
   Texte blanc du bandeau photo : ≥ 4,7:1 même sur une photo blanche (pire cas, calcul du dégradé : 9,8:1 à gauche, 5,6:1 au bout du chapô, 4,7:1 au bout du H1 en grand corps).
   Blanc sur orange #E58D32 = 2,56:1 : JAMAIS. Texte ou glyphe sur orange = var(--sur-accent).
   Piège du thème (site.css l. 321-326) : « section>div>:is(p,h3,ul,ol):not([style]) » impose gris, 820 px et marges
   aux enfants DIRECTS d'un div enfant d'une <section> : l'article est donc enveloppé dans <article> (tb-col>article),
   rien de nu à ce niveau. Apparitions : data-reveal="1" du thème (site.js). Les blocs gatés (publish-gate) ne
   s'animent qu'une fois affichés : blog-schedule.js tourne AVANT site.js (script simple, non différé, posé en fin de page à la place de <!-- JS-PAGE -->, donc après le pied : ?preview=beweb se propage aussi sur ses liens). */

.tb-page{overflow-x:clip}
.tb-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.tb-kicker{display:block;margin:0 0 12px;color:var(--accent-texte);font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.tb-hero .tb-kicker,.tb-cta .tb-kicker,.tb-index-appel .tb-kicker{color:var(--accent-sur-sombre)}

/* ---- boutons ---- */
.tb-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:13px 24px;border-radius:40px;border:1px solid transparent;font-size:15px;font-weight:750;line-height:1.2;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.tb-btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.tb-btn:hover svg{transform:translateX(3px)}
.tb-btn-plein{background:var(--accent);color:var(--sur-accent)}
.tb-btn-plein:hover{background:var(--accent-sur-sombre);color:var(--sur-accent);transform:translateY(-1px)}
.tb-btn-ligne{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.tb-btn-ligne:hover{background:#fff;border-color:#fff;color:#223D4D}
.tb-btn-ligne:hover svg{transform:none}
.tb-btn-contour{border-color:var(--accent-texte);color:var(--accent-texte);background:transparent}
.tb-btn-contour:hover{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
.tb-btn:focus-visible,.tb-chip:focus-visible,.tb-more a:focus-visible,.tb-toc a:focus-visible,.tb-faq summary:focus-visible,.tb-card:focus-visible,.tb-retour a:focus-visible,.tb-article p a:focus-visible,.tb-article li a:focus-visible{outline:3px solid var(--accent-texte);outline-offset:3px;border-radius:6px}
.tb-hero a:focus-visible,.tb-cta .tb-btn:focus-visible,.tb-index-appel .tb-btn:focus-visible{outline-color:#fff}

/* ---- bandeau de tête (photo 1) ---- */
.tb-hero{position:relative;overflow:hidden;background:#223D4D;color:#fff}
.tb-hero-bg{position:absolute;inset:0;overflow:hidden}
.tb-hero-bg img{position:absolute;left:-3%;top:-3%;display:block;width:106%;height:106%;max-width:none;object-fit:cover;object-position:var(--hero-pos,50% 62%);transform:scale(1.06);animation:tbZoom 2.4s cubic-bezier(.2,.7,.2,1) forwards}
.tb-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,61,77,.95) 0%,rgba(34,61,77,.86) 46%,rgba(34,61,77,.3) 100%)}
.tb-hero-in{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:52px 24px 64px}
.tb-hero-txt{max-width:780px}
.tb-fil{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 24px;padding:0;list-style:none;font-size:13.5px;color:rgba(255,255,255,.82)}
.tb-fil a{color:rgba(255,255,255,.9);text-decoration:underline;text-underline-offset:3px}
.tb-fil a:hover{color:#fff}
.tb-fil li+li:before{content:"›";margin-right:10px;color:rgba(255,255,255,.62)}
.tb-fil [aria-current]{color:#fff;font-weight:700}
.tb-hero h1{margin:0 0 20px;color:#fff;font-size:clamp(30px,4.6vw,54px);line-height:1.06;letter-spacing:-.02em}
.tb-hero .tb-lede{margin:0 0 22px;max-width:700px;color:rgba(255,255,255,.93);font-size:clamp(16px,1.5vw,18px);line-height:1.7}
.tb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;font-size:14px;font-weight:650;color:rgba(255,255,255,.92)}
.tb-hero-entree>*{opacity:0;animation:tbEntree .8s cubic-bezier(.2,.8,.2,1) forwards}
.tb-hero-entree>*:nth-child(2){animation-delay:.08s}.tb-hero-entree>*:nth-child(3){animation-delay:.16s}.tb-hero-entree>*:nth-child(4){animation-delay:.24s}.tb-hero-entree>*:nth-child(5){animation-delay:.32s}
@keyframes tbEntree{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes tbZoom{to{transform:scale(1)}}

/* ---- colonne de lecture ---- */
.tb-sec{padding:56px 0 76px}
.tb-col{max-width:820px;margin:0 auto;padding:0 24px}
.publish-gate__locked{padding:34px 24px;border:1px dashed var(--bord);border-radius:20px;background:var(--fond-2);text-align:center;color:var(--texte-doux);font-size:16px}

.tb-article p{margin:0 0 18px;font-size:17px;line-height:1.78;color:var(--texte)}
.tb-article p strong,.tb-article li strong{color:var(--titre);font-weight:750}
.tb-article p a,.tb-article li a{color:var(--accent-texte);font-weight:650;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.tb-article p a:hover,.tb-article li a:hover{color:var(--accent-texte-fonce)}
.tb-article h2{margin:58px 0 18px;scroll-margin-top:110px;font-size:clamp(25px,3.1vw,34px);line-height:1.13;letter-spacing:-.015em;color:var(--titre)}
.tb-article h3{margin:0;color:var(--titre)}
.tb-article ul:not(.tb-chips):not(.tb-etapes),.tb-article ol:not(.tb-etapes){line-height:1.75}

/* réponse directe sous le H2 (40-75 mots) */
.tb-article .tb-rep{padding:2px 0 2px 20px;border-left:4px solid var(--accent);font-size:18px;line-height:1.75;color:var(--texte)}

/* listes à puces accent */
.tb-article>.publish-gate__content>ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:12px}
.tb-article>.publish-gate__content>ul>li{position:relative;padding-left:26px;font-size:17px;line-height:1.7;color:var(--texte)}
.tb-article>.publish-gate__content>ul>li:before{content:"";position:absolute;left:4px;top:.66em;width:9px;height:9px;border-radius:50%;background:var(--accent)}

/* résumé + sommaire */
.tb-article .tb-brief{margin:0 0 26px;padding:26px 28px;background:var(--fond-2);border-left:5px solid var(--accent);border-radius:0 22px 22px 0}
.tb-article .tb-brief h2{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-texte);line-height:1.3}
.tb-article .tb-brief ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.tb-article .tb-brief li{position:relative;padding-left:24px;font-size:16.5px;line-height:1.65;color:var(--texte)}
.tb-article .tb-brief li:before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.tb-article .tb-toc{margin:0 0 6px;padding:24px 28px 20px;border:1px solid var(--bord);border-radius:22px;background:var(--carte)}
.tb-article .tb-toc h2{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux);line-height:1.3}
.tb-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;margin:0;padding:0;list-style:none;counter-reset:tb}
.tb-toc li{counter-increment:tb;display:flex;align-items:center;gap:12px;padding:6px 0;font-size:15.5px;line-height:1.4}
.tb-toc li:before{content:counter(tb);flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--sur-accent);font-size:13px;font-weight:800}
.tb-article .tb-toc a{color:var(--titre);font-weight:650;text-decoration:none}
.tb-article .tb-toc a:hover{color:var(--accent-texte-fonce);text-decoration:underline;text-underline-offset:3px}

/* exergue */
.tb-article .tb-exergue{position:relative;margin:46px 0;padding:6px 0 6px 28px;border-left:5px solid var(--accent);font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(21px,2.6vw,27px);font-weight:700;line-height:1.38;color:var(--titre);text-wrap:balance}

/* étapes (liste ordonnée avec fil) */
.tb-article .tb-etapes{margin:26px 0 0;padding:0;list-style:none;counter-reset:tbe}
.tb-etapes li{position:relative;counter-increment:tbe;padding:0 0 26px 66px;font-size:16.5px;line-height:1.7;color:var(--texte)}
.tb-etapes li:last-child{padding-bottom:0}
.tb-etapes li:before{content:counter(tbe);position:absolute;left:0;top:0;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--sur-accent);font-size:18px;font-weight:800}
.tb-etapes li:not(:last-child):after{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--accent);opacity:.55;transform-origin:top;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.tb-etapes.is-hidden li:after{transform:scaleY(0)}
.tb-etapes li strong{display:block;margin:0 0 2px;font-size:18px;color:var(--titre)}

/* photo 2 */
.tb-figure{margin:40px 0}
.tb-figure--portrait{max-width:420px;margin-left:auto;margin-right:auto}
.tb-figure img{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 18px 44px rgba(25,47,58,.14);cursor:zoom-in}
.tb-figure figcaption{margin:12px 4px 0;font-size:14px;line-height:1.55;color:var(--texte-doux)}

/* encart « Nos chantiers » en carte */
.tb-article .tb-chantiers{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:26px 34px;margin:52px 0;padding:36px 40px 36px 46px;overflow:hidden;border:1px solid var(--bord);border-radius:28px;background:var(--carte);box-shadow:0 22px 60px rgba(25,47,58,.1)}
.tb-chantiers:before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;background:var(--accent)}
.tb-article .tb-chantiers h3{margin:0 0 12px;font-size:clamp(23px,2.7vw,30px);line-height:1.15;letter-spacing:-.01em}
.tb-article .tb-chantiers-txt p{margin:0;font-size:16px;line-height:1.7;color:var(--texte-doux)}
.tb-chantiers-btn{display:flex;flex-direction:column;gap:12px}
.tb-chantiers-btn .tb-btn{width:100%}

/* FAQ */
.tb-faq{max-width:none}
.tb-faq details{border-bottom:1px solid var(--bord)}
.tb-faq details:first-of-type{border-top:1px solid var(--bord)}
.tb-faq summary{position:relative;display:block;padding:22px 46px 22px 0;cursor:pointer;list-style:none;font-size:17.5px;font-weight:800;line-height:1.35;color:var(--titre)}
.tb-faq summary::-webkit-details-marker{display:none}
.tb-faq summary:after{content:"+";position:absolute;right:6px;top:50%;margin-top:-16px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--accent-texte);font-size:26px;font-weight:600;line-height:1;transition:background .25s}
.tb-faq summary:hover:after{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.tb-faq details[open] summary:after{content:"−"}
.tb-faq details>div{padding:0 46px 22px 0}
.tb-article .tb-faq p{margin:0;font-size:16.5px;line-height:1.75}

/* à lire aussi */
.tb-article .tb-more{margin:54px 0 0}
.tb-article .tb-more h3,.tb-article .tb-zones h3{margin:0 0 16px;font-size:22px;line-height:1.2}
.tb-more ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.tb-more li{padding:0;font-size:16px}
.tb-article .tb-more li a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border:1px solid var(--bord);border-radius:18px;background:var(--carte);color:var(--titre);font-weight:700;line-height:1.4;text-decoration:none;transition:border-color .25s,transform .25s,box-shadow .25s}
.tb-article .tb-more li a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 14px 30px rgba(25,47,58,.1);color:var(--titre)}
.tb-more li a svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--accent-texte);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.tb-more li a:hover svg{transform:translateX(4px)}

/* on intervient aussi */
.tb-article .tb-zones{margin:46px 0 0}
.tb-article .tb-zones p{margin:0 0 6px;font-size:16.5px;color:var(--texte-doux)}
.tb-article .tb-chips{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.tb-chips li{padding:0}
.tb-article .tb-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid var(--bord);border-radius:40px;background:var(--carte);color:var(--titre);font-size:14.5px;font-weight:650;text-decoration:none;transition:border-color .25s,background .25s,transform .25s}
.tb-article .tb-chip:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--titre);transform:translateY(-2px)}
.tb-chip svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--accent-texte);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.tb-chip:hover svg{transform:translateX(3px)}

/* appel */
.tb-article .tb-cta{margin:56px 0 0;padding:clamp(30px,5vw,52px);border-radius:28px;background:#223D4D;color:#fff;overflow-wrap:anywhere}
.tb-article .tb-cta h3{margin:0 0 14px;color:#fff;font-size:clamp(25px,3.2vw,34px);line-height:1.12;letter-spacing:-.01em}
.tb-article .tb-cta p{margin:0 0 24px;max-width:600px;color:#fff;font-size:16.5px;line-height:1.7}
.tb-actions{display:flex;flex-wrap:wrap;gap:12px}
.tb-article .tb-retour{margin:34px 0 0;font-size:16px}
.tb-retour a{color:var(--accent-texte);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.tb-retour a:hover{color:var(--accent-texte-fonce)}

/* ---- index du blog ---- */
.tb-index{padding:64px 0 0}
.tb-index .tb-tete{max-width:760px;margin:0 0 38px}
.tb-index .tb-tete h2{margin:0 0 14px;font-size:clamp(26px,3.4vw,38px);line-height:1.12;letter-spacing:-.015em;color:var(--titre)}
.tb-index .tb-tete p{margin:0;font-size:17px;line-height:1.75;color:var(--texte-doux)}
.tb-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:28px}
.tb-card{flex-direction:column;overflow:hidden;border:1px solid var(--bord);border-radius:24px;background:var(--carte);box-shadow:0 14px 40px rgba(25,47,58,.07);color:var(--titre);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s;animation:tbCarte .7s cubic-bezier(.2,.8,.2,1) both}
.tb-card:hover{transform:translateY(-5px);box-shadow:0 26px 54px rgba(25,47,58,.15);border-color:var(--accent);color:var(--titre)}
.tb-card-img{display:block;overflow:hidden;aspect-ratio:16/10;background:var(--fond-2)}
.tb-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.tb-card:hover .tb-card-img img{transform:scale(1.05)}
.tb-card-corps{display:flex;flex:1;flex-direction:column;gap:10px;padding:24px 24px 26px}
.tb-card-date{display:block;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-texte)}
.tb-card h3{margin:0;font-size:21px;line-height:1.25;color:var(--titre)}
.tb-card p{margin:0;flex:1;font-size:15px;line-height:1.65;color:var(--texte-doux)}
.tb-card-lire{margin-top:6px;font-size:15px;font-weight:750;color:var(--accent-texte)}
.tb-card:hover .tb-card-lire{color:var(--accent-texte-fonce);text-decoration:underline;text-underline-offset:4px}
@keyframes tbCarte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tb-index-sec{padding:56px 0 84px}
.tb-index-appel{margin:0;padding:clamp(28px,4.5vw,46px);border-radius:28px;background:#223D4D;color:#fff}
.tb-index-appel h2{margin:0 0 12px;color:#fff;font-size:clamp(24px,3vw,32px);line-height:1.15}
.tb-index-appel p{margin:0 0 22px;max-width:620px;color:#fff;font-size:16.5px;line-height:1.7}

/* ---- tablette ---- */
@media(max-width:860px){
  .tb-article .tb-chantiers{grid-template-columns:1fr;padding:30px 28px 30px 36px}
  .tb-chantiers-btn{flex-direction:row;flex-wrap:wrap}
  .tb-chantiers-btn .tb-btn{width:auto;flex:1 1 220px}
}
/* ---- mobile (390 px) ---- */
@media(max-width:599px){
  .tb-hero-in{padding:34px 16px 46px}
  .tb-fil{margin-bottom:18px}
  .tb-sec{padding:38px 0 60px}
  .tb-col{padding:0 16px}
  .tb-article p{font-size:16.5px}
  .tb-article .tb-rep{font-size:17px;padding-left:16px}
  .tb-article h2{margin-top:46px;scroll-margin-top:90px}
  .tb-article .tb-brief{padding:22px 20px;border-radius:0 18px 18px 0}
  .tb-article .tb-toc{padding:20px 18px 14px}
  .tb-toc ol{grid-template-columns:1fr}
  .tb-article>.publish-gate__content>ul>li{font-size:16.5px}
  .tb-article .tb-exergue{margin:36px 0;padding-left:18px}
  .tb-etapes li{padding-left:58px;font-size:16px}
  .tb-etapes li:before{width:40px;height:40px;font-size:17px}
  .tb-etapes li:not(:last-child):after{left:19px;top:40px}
  .tb-figure{margin:30px 0}
  .tb-figure img{border-radius:18px}
  .tb-article .tb-chantiers{margin:40px 0;padding:26px 20px 26px 28px;border-radius:22px}
  .tb-chantiers:before{width:7px}
  .tb-chantiers-btn{flex-direction:column}
  .tb-chantiers-btn .tb-btn{width:100%;flex:none}
  .tb-faq summary{padding:20px 42px 20px 0;font-size:16.5px}
  .tb-faq details>div{padding-right:0}
  .tb-article .tb-more li a{padding:14px 16px}
  .tb-article .tb-cta{border-radius:22px;padding:28px 22px}
  .tb-actions .tb-btn{width:100%}
  .tb-index{padding:44px 0 0}
  .tb-index-sec{padding:40px 0 64px}
  .tb-wrap{padding:0 16px}
  .tb-grille{grid-template-columns:1fr;gap:22px}
  .tb-card-corps{padding:22px 20px 24px}
  .tb-index-appel{border-radius:22px;padding:26px 20px}
}
@media(prefers-reduced-motion:reduce){
  .tb-hero-bg img{animation:none;transform:none}
  .tb-hero-entree>*{opacity:1;animation:none}
  .tb-card{animation:none}
  .tb-btn,.tb-btn svg,.tb-card,.tb-card-img img,.tb-chip,.tb-chip svg,.tb-more li a,.tb-more li a svg,.tb-etapes li:after,.tb-faq summary:after{transition:none!important}
  .tb-card:hover,.tb-chip:hover,.tb-more li a:hover,.tb-btn-plein:hover{transform:none}
  .tb-card:hover .tb-card-img img{transform:none}
  .tb-etapes.is-hidden li:after{transform:none}
}