/*   Palette : cream #faf9f6 · or #c8a84b · dark #13173a
   Polices : Cormorant Garamond · Montserrat · Source Sans 3 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit}
:root{
  --cream:#faf9f6;--cream2:#f5f0e8;--white:#ffffff;
  --dark:#13173a;--text:#2c2a26;--muted:#5c5852;
  --gold:#c8a84b;--gold-dk:#a8882b;--gold-lt:#f5ead0;
  --border:#e8e2d8;
  --shadow-s:0 2px 12px rgba(19,23,58,.07);
  --shadow-m:0 8px 32px rgba(19,23,58,.12);
  --shadow-l:0 20px 60px rgba(19,23,58,.18);
  --ff-serif:'Cormorant Garamond',Georgia,serif;
  --ff-sans:'Source Sans 3','Source Sans Pro',system-ui,sans-serif;
  --ff-title:'Montserrat',system-ui,sans-serif;
  --max-w:1160px;--r:8px;--r-lg:16px;
}
body{font-family:var(--ff-sans);background:var(--white);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}
h1,h2,h3,h4{font-family:var(--ff-serif);line-height:1.15;color:var(--dark)}
h1{font-size:clamp(2.8rem,6vw,5rem);font-weight:300}
h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:400}
h3{font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:500}
p{line-height:1.75}
strong{color:var(--dark);font-weight:600}
.eyebrow{font-family:var(--ff-title);font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.eyebrow::before,.eyebrow::after{content:'';flex:0 0 30px;height:1px;background:var(--gold);opacity:.5}
.eyebrow-center{justify-content:center}
.gold-sep{display:block;width:48px;height:2px;background:var(--gold);margin:.75rem auto 1.25rem}
.gold-sep-left{margin-left:0}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ff-title);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.9rem 2rem;border:2px solid transparent;border-radius:6px;transition:all .25s ease;white-space:nowrap;cursor:pointer;text-decoration:none}
.btn-gold{background:var(--gold-lt);color:var(--gold-dk);border:1px solid var(--gold);border-radius:6px;box-shadow:none}
.btn-gold:hover{background:var(--gold);color:var(--white);border-color:var(--gold);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:6px}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.btn-outline-gold{background:transparent;color:var(--gold-dk);border:1px solid var(--gold);border-radius:6px}
.btn-outline-gold:hover{background:var(--gold);color:var(--white);border-color:var(--gold)}
.btn-outline-white{background:transparent;color:var(--white);border-color:rgba(255,255,255,.6)}
.btn-outline-white:hover{background:var(--white);color:var(--dark)}
.btn-lg{padding:1.1rem 2.5rem;font-size:.78rem}
.topbar{background:var(--dark);color:rgba(255,255,255,.7);font-family:var(--ff-title);font-size:.7rem;letter-spacing:.04em;padding:.45rem 0}
.topbar .wrap{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.topbar a{color:rgba(255,255,255,.78);transition:color .2s;display:flex;align-items:center;gap:.35rem}
.topbar a:hover{color:var(--gold)}
.topbar .sep{opacity:.25}
.topbar .hours{margin-left:auto;color:rgba(255,255,255,.45);font-size:.65rem}
.site-header{position:sticky;top:0;z-index:500;background:var(--white);border-bottom:1px solid var(--border);box-shadow:var(--shadow-s)}
.site-header .wrap{display:flex;align-items:center;height:72px;gap:1rem}
.logo{display:flex;flex-direction:column;flex-shrink:0;text-decoration:none}
.logo-name{font-family:var(--ff-title);font-size:1.45rem;font-weight:800;color:var(--dark);letter-spacing:-.03em;line-height:1}
.logo-name span{color:var(--gold)}
.logo-tag{font-family:var(--ff-title);font-size:.52rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:.1rem}
.nav{display:flex;align-items:center;margin:0 auto;gap:0}
.nav-item{position:relative}
.nav-link{font-family:var(--ff-title);font-size:.73rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dark);padding:.45rem .8rem;border-radius:4px;transition:color .2s,background .2s;display:flex;align-items:center;gap:.3rem;text-decoration:none}
.nav-link:hover,.nav-link.active{color:var(--gold);background:var(--gold-lt)}
.nav-arrow{display:inline-block;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.nav-item:hover .nav-arrow{transform:rotate(225deg) translateY(-2px)}
.dropdown{position:absolute;top:calc(100% + 6px);left:0;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-m);min-width:250px;padding:.6rem;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .2s ease;z-index:100}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dd-link{display:flex;align-items:center;gap:.85rem;padding:.6rem .75rem;border-radius:var(--r);color:var(--text);font-size:.875rem;transition:background .2s,color .2s;text-decoration:none}
.dd-link:hover{background:var(--cream);color:var(--gold)}
.dd-icon{width:34px;height:34px;background:var(--gold-lt);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.dd-name{font-family:var(--ff-title);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dark);display:block}
.dd-sub{font-size:.62rem;color:var(--muted)}
.dd-link:hover .dd-name{color:var(--gold)}
.burger{display:none;flex-direction:column;gap:5px;padding:.5rem;flex-shrink:0;z-index:600;cursor:pointer;background:none;border:none}
.burger span{width:22px;height:2px;background:var(--dark);border-radius:2px;transition:.3s;display:block}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.nav-cta{flex-shrink:0}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:88vh}
.hero-content{display:flex;flex-direction:column;justify-content:center;padding:6rem 4rem 6rem 0;background:var(--white)}
.hero-img{position:relative;overflow:hidden;background:var(--dark)}
.hero-img img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform 10s ease}
.hero-img:hover img{transform:scale(1.04)}
.hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(250,249,246,.1),transparent 50%)}
.hero-pills{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.5rem;z-index:2}
.pill{display:flex;align-items:center;gap:.75rem;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-radius:var(--r);padding:.65rem 1rem;box-shadow:var(--shadow-m);border-left:3px solid var(--gold);transition:transform .2s}
.pill:hover{transform:translateX(-3px)}
.pill-icon{font-size:1rem}
.pill-name{font-family:var(--ff-title);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dark);display:block}
.pill-sub{font-size:.6rem;color:var(--muted);display:block;margin-top:.05rem}
.hero h1{margin-bottom:1.5rem}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero-services-row{font-family:var(--ff-title);font-size:.65rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.75rem;margin-bottom:1.75rem}
.hero-services-row::before,.hero-services-row::after{content:'';flex:1;height:1px;background:var(--border)}
.hero-desc{color:var(--muted);font-size:1rem;line-height:1.8;margin-bottom:2.5rem;max-width:480px}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3rem}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding-top:2.5rem;border-top:1px solid var(--border)}
.stat-num{font-family:var(--ff-title);font-size:2rem;font-weight:800;color:var(--dark);line-height:1}
.stat-label{font-family:var(--ff-title);font-size:.58rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.section{padding:6rem 0}
.section-cream{background:var(--cream)}
.section-dark{background:var(--dark)}
.section-dark h2,.section-dark h3{color:var(--white)}
.section-dark .eyebrow{color:var(--gold)}
.section-dark .eyebrow::before,.section-dark .eyebrow::after{background:var(--gold)}
.section-dark p{color:rgba(255,255,255,.7)}
.section-head{text-align:center;max-width:700px;margin:0 auto 4rem}
.section-head h2{margin-bottom:.5rem}
.section-head p{color:var(--muted);margin-top:.75rem}
.section-dark .section-head p{color:rgba(255,255,255,.6)}
.expertises-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.exp-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:2.5rem 2rem;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.exp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.exp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.exp-num{font-family:var(--ff-serif);font-size:4rem;font-weight:300;color:var(--gold-lt);line-height:1;margin-bottom:1rem}
.exp-title{font-family:var(--ff-serif);font-size:1.7rem;color:var(--dark);margin-bottom:.75rem}
.exp-desc{color:var(--muted);font-size:.9rem;line-height:1.7;margin-bottom:1.5rem}
.exp-list{margin-bottom:1.75rem}
.exp-list li{font-family:var(--ff-title);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);padding:.35rem 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem}
.exp-list li::before{content:'›';color:var(--gold);font-size:1rem;font-weight:700}
.service-split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.service-split.rev .split-text{order:2}
.service-split.rev .split-img{order:1}
.split-img{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-m)}
.split-img img{width:100%;height:520px;object-fit:cover;transition:transform .5s}
.split-img:hover img{transform:scale(1.04)}
.split-eyebrow{font-family:var(--ff-title);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.6rem;margin-bottom:.85rem}
.split-eyebrow::before{content:'';flex:0 0 24px;height:1px;background:var(--gold);opacity:.6}
.split-specs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0}
.spec{border-left:2px solid var(--gold);padding-left:.85rem}
.spec-label{font-family:var(--ff-title);font-size:.58rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.spec-val{font-family:var(--ff-serif);font-size:1rem;font-weight:500;color:var(--dark)}
.split-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0}
.tag{font-family:var(--ff-title);font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--gold-lt);color:var(--gold-dk);padding:.3rem .9rem;border-radius:20px}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.portfolio-item{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/3}
.portfolio-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.portfolio-item:hover img{transform:scale(1.06)}
.portfolio-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(19,23,58,.82) 0%,transparent 55%);opacity:0;transition:opacity .3s;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem}
.portfolio-item:hover .portfolio-overlay{opacity:1}
.portfolio-cat{font-family:var(--ff-title);font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.portfolio-name{font-family:var(--ff-serif);font-size:1.1rem;color:var(--white)}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;position:relative;text-align:center}
.process-grid::before{content:'';position:absolute;top:27px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent)}
.step-num{width:54px;height:54px;border-radius:50%;background:var(--dark);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;font-family:var(--ff-serif);font-size:1.3rem;color:var(--gold)}
.section-dark .step-num{background:rgba(255,255,255,.05)}
.step-title{font-family:var(--ff-title);font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dark);margin-bottom:.5rem}
.section-dark .step-title{color:var(--white)}
.step-desc{font-size:.875rem;color:var(--muted);line-height:1.65}
.section-dark .step-desc{color:rgba(255,255,255,.55)}
.engagements-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.engagement{padding:2rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--white);transition:border-color .3s,box-shadow .3s}
.engagement:hover{border-color:var(--gold);box-shadow:var(--shadow-s)}
.engagement-icon{font-size:1.8rem;margin-bottom:1rem}
.engagement-title{font-family:var(--ff-title);font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dark);margin-bottom:.5rem}
.engagement-desc{font-size:.875rem;color:var(--muted);line-height:1.65}
.chiffres-band{background:var(--dark);padding:5rem 0}
.chiffres-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.chiffre-num{font-family:var(--ff-serif);font-size:3.5rem;font-weight:300;color:var(--gold);line-height:1}
.chiffre-label{font-family:var(--ff-title);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:.5rem}
.zone-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.zone-list{display:flex;flex-direction:column}
.zone-item{display:flex;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--border);align-items:baseline}
.zone-label{font-family:var(--ff-title);font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);min-width:90px;flex-shrink:0}
.zone-cities{font-size:.875rem;color:var(--muted);line-height:1.6}
.temoignages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.temoignage{background:var(--cream);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem}
.temoignage-stars{color:var(--gold);font-size:.9rem;letter-spacing:.1em;margin-bottom:1rem}
.temoignage-text{font-family:var(--ff-serif);font-size:1rem;font-style:italic;color:var(--text);line-height:1.7;margin-bottom:1.25rem}
.temoignage-author{display:flex;align-items:center;gap:.85rem}
.temoignage-avatar{width:38px;height:38px;background:var(--dark);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-title);font-size:.8rem;font-weight:700;color:var(--gold);flex-shrink:0}
.temoignage-name{font-family:var(--ff-title);font-size:.78rem;font-weight:700;color:var(--dark)}
.temoignage-role{font-size:.7rem;color:var(--muted)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.blog-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.blog-card-img{overflow:hidden}
.blog-card-img img{width:100%;height:200px;object-fit:cover;transition:transform .5s}
.blog-card:hover .blog-card-img img{transform:scale(1.05)}
.blog-card-body{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.blog-card-cat{font-family:var(--ff-title);font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.blog-card-title{font-family:var(--ff-serif);font-size:1.1rem;color:var(--dark);line-height:1.35;flex:1;margin-bottom:1rem}
.blog-card-title a:hover{color:var(--gold)}
.blog-card-link{font-family:var(--ff-title);font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.4rem;margin-top:auto}
.blog-card-link::after{content:'→'}
.cta-final{background:linear-gradient(135deg,var(--dark) 0%,#1a1e4a 100%);padding:6rem 0;text-align:center;position:relative;overflow:hidden}
.cta-final::before{content:'';position:absolute;inset:0;opacity:.04;background-image:repeating-linear-gradient(45deg,var(--gold) 0,var(--gold) 1px,transparent 0,transparent 50%);background-size:20px 20px}
.cta-final .wrap{position:relative;z-index:1}
.cta-final h2{color:var(--white);margin-bottom:1.25rem}
.cta-final p{color:rgba(255,255,255,.65);max-width:540px;margin:0 auto 2.5rem}
.cta-final-btns{display:flex;align-items:center;justify-content:center;gap:1.25rem;flex-wrap:wrap}
.cta-final-tel{font-family:var(--ff-title);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:.5rem;transition:color .2s;text-decoration:none}
.cta-final-tel:hover{color:var(--gold)}
.contact-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:5rem}
.contact-info-item{display:flex;gap:1rem;padding-bottom:1.75rem;margin-bottom:1.75rem;border-bottom:1px solid var(--border)}
.contact-info-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.contact-info-icon{width:44px;height:44px;background:var(--gold-lt);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.contact-info-label{font-family:var(--ff-title);font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.contact-info-val{font-size:.95rem;color:var(--dark);font-weight:600}
.contact-info-val a{color:var(--gold)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-full{grid-column:span 2}
.form-label{font-family:var(--ff-title);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.4rem}
.form-input{width:100%;padding:.85rem 1.1rem;border:1.5px solid var(--border);border-radius:var(--r);font-size:.95rem;color:var(--text);background:var(--white);transition:border-color .2s,box-shadow .2s}
.form-input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(200,168,75,.1)}
textarea.form-input{min-height:140px;resize:vertical}
.form-ok{background:#d4edda;color:#155724;padding:1rem 1.25rem;border-radius:var(--r);border:1px solid #c3e6cb;margin-bottom:1.5rem;font-size:.9rem}
.form-err{background:#fde8e8;color:#7b1c1c;padding:1rem 1.25rem;border-radius:var(--r);border:1px solid #f5c6c6;margin-bottom:1.5rem;font-size:.9rem}
.form-legal{font-size:.7rem;color:var(--muted);margin-top:.5rem}
.page-hero{background:var(--dark);padding:5.5rem 0;text-align:center}
.page-hero .eyebrow{justify-content:center}
.page-hero h1{color:var(--white);font-size:clamp(2.2rem,5vw,4rem)}
.breadcrumb{background:var(--cream);border-bottom:1px solid var(--border);padding:.65rem 0}
.breadcrumb .wrap{display:flex;align-items:center;gap:.5rem;font-family:var(--ff-title);font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.breadcrumb a{color:var(--muted);transition:color .2s}
.breadcrumb a:hover{color:var(--gold)}
.bc-sep{opacity:.4}
.blog-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.blog-index-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column}
.blog-index-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.bic-img{overflow:hidden}
.bic-img img{width:100%;height:230px;object-fit:cover;transition:transform .5s}
.blog-index-card:hover .bic-img img{transform:scale(1.05)}
.bic-body{padding:1.75rem;flex:1;display:flex;flex-direction:column}
.bic-cat{font-family:var(--ff-title);font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.bic-title{font-family:var(--ff-serif);font-size:1.2rem;color:var(--dark);line-height:1.35;flex:1;margin-bottom:.85rem}
.bic-title a:hover{color:var(--gold)}
.bic-excerpt{font-size:.875rem;color:var(--muted);line-height:1.7;margin-bottom:1.25rem}
.bic-link{font-family:var(--ff-title);font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.4rem;margin-top:auto}
.bic-link::after{content:'→'}
.article-hero{position:relative;height:460px;overflow:hidden;background:var(--dark)}
.article-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.article-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(19,23,58,.9) 0%,rgba(19,23,58,.25) 100%)}
.article-hero-inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:3rem}
.article-hero-cat{font-family:var(--ff-title);font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);background:rgba(200,168,75,.15);padding:.25rem .75rem;border-radius:3px;display:inline-block;margin-bottom:.75rem}
.article-hero h1{color:var(--white);font-size:clamp(1.8rem,4vw,3rem);max-width:800px}
.article-layout{display:grid;grid-template-columns:1fr 300px;gap:4rem;padding:4rem 0;align-items:start}
.article-content{color:var(--text);line-height:1.85}
.article-lead{font-family:var(--ff-serif);font-size:1.15rem;font-style:italic;color:var(--dark);border-left:3px solid var(--gold);padding-left:1.5rem;margin-bottom:2.5rem;line-height:1.7}
.article-content h2{font-size:1.6rem;margin:2.5rem 0 .85rem}
.article-content h3{font-size:1.2rem;margin:1.75rem 0 .5rem}
.article-content p{margin-bottom:1.1rem}
.article-content ul,.article-content ol{margin:0 0 1.25rem 1.5rem}
.article-content li{margin-bottom:.4rem}
.article-content a{color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.article-content strong{color:var(--dark)}
.article-img{width:100%;border-radius:var(--r-lg);margin:2rem 0;max-height:440px;object-fit:cover;display:block}
.article-tip{background:var(--gold-lt);border-left:3px solid var(--gold);padding:1.1rem 1.5rem;border-radius:0 var(--r) var(--r) 0;margin:2rem 0;font-size:.9rem;color:#6b4a00}
.article-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:2rem 0}
.article-gallery img{width:100%;height:180px;object-fit:cover;border-radius:var(--r)}
.article-sidebar{position:sticky;top:100px}
.sidebar-cta{background:var(--dark);border-radius:var(--r-lg);padding:1.75rem;margin-bottom:1.5rem}
.sidebar-cta h3{font-family:var(--ff-serif);color:var(--gold);font-size:1.15rem;margin-bottom:.5rem}
.sidebar-cta p{color:rgba(255,255,255,.65);font-size:.85rem;margin-bottom:1.25rem}
.sidebar-links{background:var(--cream);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem}
.sidebar-links h4{font-family:var(--ff-title);font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--dark);border-bottom:1px solid var(--border);padding-bottom:.75rem;margin-bottom:1rem}
.sidebar-links a{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--muted);padding:.4rem 0;border-bottom:1px solid var(--border);transition:color .2s;text-decoration:none}
.sidebar-links a:last-child{border-bottom:none}
.sidebar-links a:hover{color:var(--gold)}
.sidebar-links a::before{content:'›';color:var(--gold);font-weight:700}
.site-footer{background:var(--dark);color:rgba(255,255,255,.65);padding:4rem 0 1.75rem}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-logo-name{font-family:var(--ff-title);font-size:1.3rem;font-weight:800;color:var(--white)}
.footer-logo-name span{color:var(--gold)}
.footer-desc{font-size:.85rem;line-height:1.7;color:rgba(255,255,255,.5);max-width:260px;margin:.75rem 0 1.25rem}
.footer-social{display:flex;gap:.5rem}
.footer-social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.15);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:rgba(255,255,255,.45);transition:all .2s;text-decoration:none}
.footer-social a:hover{color:var(--gold);border-color:var(--gold)}
.footer-col h4{font-family:var(--ff-title);font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.footer-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-col a{font-size:.85rem;color:rgba(255,255,255,.5);transition:color .2s;text-decoration:none}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:rgba(255,255,255,.3);flex-wrap:wrap;gap:.75rem}
.footer-bottom a{color:rgba(255,255,255,.3);transition:color .2s;text-decoration:none}
.footer-bottom a:hover{color:var(--gold)}
.back-top{display:flex;align-items:center;gap:.4rem;cursor:pointer;transition:color .2s}
.back-top:hover{color:var(--gold)}
.realisations-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.realisation-item{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/3}
.realisation-item.large{grid-column:span 2;aspect-ratio:16/9}
.realisation-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.realisation-item:hover img{transform:scale(1.06)}
.realisation-overlay{position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(19,23,58,.82));opacity:0;transition:opacity .3s;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem}
.realisation-item:hover .realisation-overlay{opacity:1}
.realisation-cat{font-family:var(--ff-title);font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.realisation-name{font-family:var(--ff-serif);font-size:1.1rem;color:var(--white)}
@media(max-width:1024px){.hero{grid-template-columns:1fr;min-height:auto}.hero-content{padding:4rem 0}.hero-img{height:420px}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.expertises-grid,.blog-grid,.blog-index-grid,.temoignages-grid,.engagements-grid,.chiffres-grid,.portfolio-grid,.realisations-grid{grid-template-columns:1fr 1fr}.service-split,.contact-layout,.zone-grid{grid-template-columns:1fr}.service-split.rev .split-text,.service-split.rev .split-img{order:unset}.article-layout{grid-template-columns:1fr}.article-sidebar{position:static}.process-grid{grid-template-columns:1fr 1fr}.process-grid::before{display:none}}
@media(max-width:768px){.nav{display:none;position:fixed;inset:0;background:var(--white);flex-direction:column;align-items:flex-start;padding:6rem 1.5rem 2rem;z-index:550;overflow-y:auto;gap:0}.nav.open{display:flex}.nav-link{font-size:.9rem;padding:.8rem 1rem;width:100%;border-radius:var(--r)}.dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;border-left:2px solid var(--gold-lt);border-radius:0;padding:.25rem 0 .25rem 1rem;background:transparent}.burger{display:flex}.nav-cta{display:none}.hero-pills{display:none}}
@media(max-width:640px){.expertises-grid,.blog-grid,.blog-index-grid,.temoignages-grid,.process-grid,.chiffres-grid,.engagements-grid,.portfolio-grid,.realisations-grid{grid-template-columns:1fr}.realisation-item.large{grid-column:span 1;aspect-ratio:4/3}.hero-stats{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-full{grid-column:span 1}}

/* CORRECTIONS V3 */
.hero-content{padding-left:max(1.5rem,calc((100vw - 1160px)/2 + 1.5rem));padding-right:3rem}
.spec-label{display:block;margin-bottom:.15rem}
.spec-val{display:block}
.exp-card{border:1px solid var(--border)}
@media(max-width:640px){.hero-content{padding-left:1.5rem;padding-right:1.5rem}}

/* ================================================================
   CORRECTIONS V3 — intégrées dans style.css
   ================================================================ */

/* 1. HERO marge gauche container + fondu blanc vers image */
.hero-content {
  padding-left: max(1.5rem, calc((100vw - 1160px) / 2 + 1.5rem));
  padding-right: 3rem;
}
.hero-img::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 120px;
  background: linear-gradient(to right, var(--white), transparent);
  z-index: 3;
  pointer-events: none;
}

/* 2. NAV CTA bouton masqué */
.nav-cta { display: none !important; }

/* 3. TITRES deux tons — em en or */
h1 em, h2 em, h3 em { font-style: italic; color: var(--gold) !important; }

/* 4. SECTION HEAD alignements */
.section-head { text-align: center; max-width: 700px; margin: 0 auto 4rem; }
.section-head .eyebrow { justify-content: center; }
.section-head h2 { margin-bottom: .5rem; }
.section-dark .eyebrow { justify-content: center; }

/* 5. DROPDOWN icônes discrètes — carré or */
.dd-icon { font-size: 0 !important; }
.dd-icon::after { content:''; width:8px; height:8px; background:var(--gold); border-radius:2px; display:block; }

/* 6. DATES blog masquées dans les cards */
.bic-date { display: none; }

/* 7. BOUTON article CTA box visible */
.article-cta-box {
  background: var(--gold-lt);
  border: 2px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 2rem;
  margin-top: 2.5rem;
  text-align: center;
}
.article-cta-box h3 { font-family: var(--ff-serif); color: var(--dark); font-size: 1.4rem; margin-bottom: .75rem; }
.article-cta-box p { color: var(--muted); margin-bottom: 1.25rem; }
.article-cta-box .btn { background: var(--gold); color: var(--white) !important; border: 2px solid var(--gold); }
.article-cta-box .btn:hover { background: var(--gold-dk); border-color: var(--gold-dk); }

/* 8. SPEC items 2 lignes */
.spec-label { display: block; margin-bottom: .1rem; }
.spec-val { display: block; }
.exp-card { border: 1px solid var(--border); }

/* 9. MOBILE hero */
@media(max-width:1024px) {
  .hero-content { padding-left: 1.5rem; padding-right: 1.5rem; }
  .hero-img::before { display: none; }
}


/* ===== CORRECTIONS V3 — intégrées ===== */
.hero-content{padding-left:max(1.5rem,calc((100vw - 1160px)/2 + 1.5rem));padding-right:3rem}
.hero-img::before{content:'';position:absolute;top:0;left:0;bottom:0;width:120px;background:linear-gradient(to right,var(--white),transparent);z-index:3;pointer-events:none}
.nav-cta{display:none!important}
.spec-label{display:block;margin-bottom:.1rem}
.spec-val{display:block}
h1 em,h2 em,h3 em{font-style:italic;color:var(--gold)!important}
.section-head{text-align:center;max-width:700px;margin:0 auto 4rem}
.section-head .eyebrow{justify-content:center;margin-bottom:.85rem}
.section-dark .eyebrow{justify-content:center}
.dd-icon{font-size:0!important}
.dd-icon::after{content:'';width:8px;height:8px;background:var(--gold);border-radius:2px;display:block}
.bic-date{display:none}
.article-cta-box{background:var(--gold-lt);border:2px solid var(--gold);border-radius:var(--r-lg);padding:2rem;margin-top:2.5rem;text-align:center}
.article-cta-box h3{font-family:var(--ff-serif);color:var(--dark);font-size:1.4rem;margin-bottom:.75rem}
.article-cta-box p{color:var(--muted);margin-bottom:1.25rem}
.article-cta-box .btn{background:var(--gold)!important;color:var(--white)!important;border-color:var(--gold)!important}
.article-cta-box .btn:hover{background:var(--gold-dk)!important;border-color:var(--gold-dk)!important}
@media(max-width:1024px){.hero-content{padding-left:1.5rem;padding-right:1.5rem}.hero-img::before{display:none}}


/* === ENGAGEMENTS NUMÉROTÉS — page à-propos === */
.engagements-numbered{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.eng-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.75rem 1.5rem;position:relative;overflow:hidden;transition:border-color .25s}
.eng-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);opacity:0;transition:opacity .25s}
.eng-card:hover{border-color:var(--gold)}
.eng-card:hover::before{opacity:1}
.eng-num{font-family:var(--ff-serif);font-size:2.8rem;font-weight:300;color:var(--border);line-height:1;margin-bottom:.85rem;letter-spacing:-.02em}
.eng-title{font-family:var(--ff-title);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dark);margin-bottom:.6rem}
.eng-line{width:28px;height:2px;background:var(--gold);margin-bottom:.85rem}
.eng-desc{font-size:.8rem;color:var(--muted);line-height:1.7}
@media(max-width:900px){.engagements-numbered{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.engagements-numbered{grid-template-columns:1fr}}

/* === ARTICLE HERO — titre correctement positionné en bas === */
.article-hero{position:relative;height:460px;overflow:hidden;background:var(--dark)}
.article-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.article-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(19,23,58,.92) 0%,rgba(19,23,58,.3) 55%,rgba(19,23,58,.05) 100%)}
.article-hero-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:2.5rem 3rem}
.article-hero-cat{display:inline-flex;align-items:center;gap:.5rem;background:rgba(200,168,75,.18);border:1px solid rgba(200,168,75,.4);color:var(--gold);font-family:var(--ff-title);font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:.3rem .85rem;border-radius:3px;margin-bottom:.75rem;width:fit-content}
h1.article-hero{font-family:var(--ff-serif);font-size:clamp(1.7rem,3.5vw,2.6rem);font-weight:400;color:var(--white);line-height:1.15;max-width:780px;margin:0}

/* === BLOG VIGNETTE — image fallback visible === */
.bic-img img{background:var(--cream2);min-height:230px}


/* =========================================
   CORRECTIONS MOBILE — Marges & Layout
   ========================================= */

/* ARTICLES — marges latérales correctes mobile */
@media(max-width:768px){
  .article-layout{
    grid-template-columns:1fr;
    padding:2rem 0;
    gap:2rem;
  }
  .article-hero-inner{ padding:1.5rem 1.25rem; }
  .article-hero{ height:320px; }
  .article-hero h1{ font-size:1.5rem; }
  .article-content{ padding:0; }
  .article-lead{ font-size:1rem; padding-left:1rem; }
  .wrap{ padding:0 1.25rem; }
}

/* SIDEBAR ARTICLE — lien retour blog en bas sur mobile */
@media(max-width:900px){
  .article-sidebar{ position:static; }
}
.back-to-blog{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--ff-title);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  padding:.85rem 1rem;
  border:1px solid var(--gold);
  border-radius:var(--r);
  text-decoration:none;
  transition:all .2s;
  margin-top:1.25rem;
}
.back-to-blog:hover{ background:var(--gold); color:var(--white); }
.back-to-blog svg{ flex-shrink:0; transition:transform .2s; }
.back-to-blog:hover svg{ transform:translateX(-3px); }

/* DROPDOWN MOBILE — ancré à droite */
@media(max-width:768px){
  .dropdown{
    left:auto !important;
    right:0;
    min-width:220px;
  }
}

/* PAGES SERVICES mobile */
@media(max-width:768px){
  .service-split{ grid-template-columns:1fr; }
  .service-split.rev .split-text{ order:unset; }
  .service-split.rev .split-img{ order:unset; }
  .split-img img{ height:280px; }
  .split-specs{ grid-template-columns:1fr 1fr; }
  .hero-stats{ grid-template-columns:1fr 1fr; }
}

/* PORTFOLIO MOBILE */
@media(max-width:768px){
  .realisations-grid{ grid-template-columns:1fr; }
  .realisation-item.large{ grid-column:span 1; aspect-ratio:4/3; }
}

/* ENGAGEMENTS MOBILE */
@media(max-width:768px){
  .engagements-numbered{ grid-template-columns:1fr 1fr; }
}
@media(max-width:480px){
  .engagements-numbered{ grid-template-columns:1fr; }
}

/* TICKER — une seule police, pas de gras */


/* =========================================
   CORRECTIONS FINALES V3
   ========================================= */

/* TICKER — police fine uniforme, vitesse lente, espacement serré */

/* BIC-BRAND — tag élégant fin sous la catégorie */
.bic-brand{font-family:var(--ff-serif);font-size:.78rem;font-weight:400;font-style:italic;color:var(--muted);display:block;margin-bottom:.4rem;letter-spacing:.01em}
.bic-cat{font-family:var(--ff-title);font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:.15rem}

/* BACK-TO-BLOG — lien texte simple, pas de bouton */
.back-to-blog{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--ff-title);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  text-decoration:none;
  margin-top:1.5rem;
  padding:0;
  border:none;
  background:none;
  transition:color .2s;
}
.back-to-blog:hover{color:var(--gold-dk)}
.back-to-blog svg{transition:transform .2s}
.back-to-blog:hover svg{transform:translateX(-3px)}

/* MOBILE — marges latérales articles et pages */
@media(max-width:768px){
  .wrap{padding-left:1.25rem;padding-right:1.25rem}
  .article-layout{
    grid-template-columns:1fr;
    padding:2rem 0;
    gap:2rem;
  }
  .article-hero-inner{padding:1.5rem 1.25rem}
  .article-hero{height:320px}
  h1.article-hero{font-size:1.4rem}
  .article-lead{padding-left:1rem}
  .article-sidebar{position:static;order:2}
  .article-content{order:1}
  
  /* Sur mobile la sidebar passe sous le contenu */
  .article-layout{display:flex;flex-direction:column}
  
  /* Dropdown mobile — ancré à droite */
  .dropdown{left:auto;right:0;min-width:220px}
  
  /* Engagements mobile */
  .engagements-numbered{grid-template-columns:1fr 1fr}
  
  /* Réalisations mobile */
  .realisations-grid{grid-template-columns:1fr}
  .realisation-item.large{grid-column:span 1;aspect-ratio:4/3}
  
  /* Stats hero mobile */
  .hero-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .wrap{padding-left:1rem;padding-right:1rem}
  .engagements-numbered{grid-template-columns:1fr}
  .blog-index-grid{grid-template-columns:1fr}
}


/* === SECTION PROFESSIONNELS & ARCHITECTES === */
.section-pro{background:var(--dark);padding:5rem 0;position:relative;overflow:hidden}
.section-pro::before{content:'';position:absolute;inset:0;opacity:.04;background-image:repeating-linear-gradient(45deg,var(--gold) 0,var(--gold) 1px,transparent 0,transparent 50%);background-size:20px 20px}
.pro-inner{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.pro-text .eyebrow{margin-bottom:.85rem}
.pro-text h2{font-family:var(--ff-serif);font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:300;color:var(--white);line-height:1.15;margin-bottom:1rem}
.pro-text h2 em{font-style:italic;color:var(--gold)}
.pro-text p{font-size:.875rem;color:rgba(255,255,255,.55);line-height:1.8;margin-bottom:2rem;max-width:420px}
.pro-avantages{display:flex;flex-direction:column;gap:.85rem}
.pro-av{display:flex;align-items:flex-start;gap:1rem;padding:1.1rem 1.25rem;background:rgba(255,255,255,.05);border-radius:var(--r-lg);border:1px solid rgba(200,168,75,.2);transition:border-color .25s}
.pro-av:hover{border-color:rgba(200,168,75,.5)}
.pro-av-num{font-family:var(--ff-serif);font-size:1.8rem;font-weight:300;color:var(--gold);line-height:1;flex-shrink:0;min-width:2rem}
.pro-av-title{font-family:var(--ff-title);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--white);margin-bottom:.3rem}
.pro-av-desc{font-size:.78rem;color:rgba(255,255,255,.45);line-height:1.65}
@media(max-width:900px){
  .pro-inner{grid-template-columns:1fr;gap:2.5rem}
}
@media(max-width:640px){
  .section-pro{padding:3.5rem 0}
}


/* === FIX MARGE DROITE ARTICLES — mobile ===  */
@media(max-width:900px){
  .article-layout{
    display:grid;
    grid-template-columns:1fr;
    padding:2rem 0;
    gap:2rem;
  }
  .article-content,.article-sidebar{
    padding-left:0;
    padding-right:0;
  }
}
/* Wrap global — garantir padding des deux côtés */
.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding-left:clamp(1rem,4vw,1.5rem);
  padding-right:clamp(1rem,4vw,1.5rem);
}

/* === LOGO — alignement tagline ===  */
.logo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex-shrink:0;
  text-decoration:none;
  line-height:1;
}
.logo-name{
  font-family:var(--ff-title);
  font-size:1.45rem;
  font-weight:800;
  color:var(--dark);
  letter-spacing:-.03em;
  line-height:1;
  display:block;
}
.logo-tag{
  font-family:var(--ff-title);
  font-size:.48rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.2rem;
  display:block;
  white-space:nowrap;
}


/* =========================================
   FIX LOGO + MOBILE + MARGES ARTICLES
   ========================================= */

/* LOGO — tagline alignée sous le nom */
.logo { display:flex; flex-direction:column; align-items:flex-start; flex-shrink:0; text-decoration:none; gap:0; }
.logo-name { font-family:var(--ff-title); font-size:1.45rem; font-weight:800; color:var(--dark); letter-spacing:-.03em; line-height:1; }
.logo-name span { color:var(--gold); }
.logo-tag { font-family:var(--ff-title); font-size:.46rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:.18rem; line-height:1; white-space:nowrap; display:block; }

/* HEADER WRAP — logo gauche, burger et nav à droite */
.site-header .wrap { display:flex; align-items:center; height:72px; gap:0; }
.site-header .wrap .logo { margin-right:auto; }
.burger { margin-left:auto; order:10; }

/* BURGER — toujours à droite, loin du logo */
@media(max-width:768px){
  .site-header .wrap { padding:0 1.25rem; }
  .burger { display:flex; order:10; margin-left:auto; }
  .nav-cta { display:none !important; }
  .nav.open { padding-top:5rem; }
}

/* ARTICLES — marges gauche ET droite forcées */
.article-layout {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:4rem;
  padding:3.5rem 0;
  align-items:start;
}
@media(max-width:900px){
  .article-layout {
    grid-template-columns:1fr !important;
    padding:2rem 0 !important;
    gap:2rem !important;
  }
  .article-sidebar { position:static !important; order:2; }
  .article-content { order:1; }
}

/* WRAP — padding symmetrique garanti */
.wrap {
  max-width:var(--max-w);
  margin:0 auto;
  padding-left:clamp(1rem, 3.5vw, 1.5rem) !important;
  padding-right:clamp(1rem, 3.5vw, 1.5rem) !important;
}

/* ARTICLE spécifique — garantir l'espace des deux côtés */
.article-content,
.article-sidebar {
  min-width:0;
  overflow:hidden;
}


/* === BOUTONS STYLE D — version finale === */
.btn{border-radius:6px}
.btn-gold{
  background:var(--gold-lt) !important;
  color:var(--gold-dk) !important;
  border:1px solid var(--gold) !important;
  border-radius:6px !important;
  box-shadow:none !important;
}
.btn-gold:hover{
  background:var(--gold) !important;
  color:var(--white) !important;
  border-color:var(--gold) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 4px 16px rgba(200,168,75,.25) !important;
}
.btn-outline,.btn-outline-gold{
  background:transparent !important;
  color:var(--muted) !important;
  border:1px solid var(--border) !important;
  border-radius:6px !important;
  box-shadow:none !important;
}
.btn-outline:hover,.btn-outline-gold:hover{
  border-color:var(--gold) !important;
  color:var(--gold) !important;
  background:transparent !important;
  transform:translateY(-1px) !important;
}
/* Boutons sur fond sombre — sidebar articles */
.sidebar-cta .btn-gold{
  background:var(--gold) !important;
  color:var(--white) !important;
  border-color:var(--gold) !important;
}
.sidebar-cta .btn-gold:hover{
  background:var(--gold-dk) !important;
  border-color:var(--gold-dk) !important;
}
.sidebar-cta .btn-outline-white{
  background:transparent !important;
  color:rgba(255,255,255,.65) !important;
  border:1px solid rgba(255,255,255,.3) !important;
  border-radius:6px !important;
}
.sidebar-cta .btn-outline-white:hover{
  background:rgba(255,255,255,.1) !important;
  color:var(--white) !important;
  border-color:rgba(255,255,255,.6) !important;
}
/* CTA final sur fond sombre */
.cta-final .btn-gold{
  background:var(--gold) !important;
  color:var(--white) !important;
  border-color:var(--gold) !important;
}
.cta-final .btn-gold:hover{
  background:var(--gold-dk) !important;
}
/* Article CTA box */
.article-cta-box .btn-gold, .article-cta-box .btn{
  background:var(--gold) !important;
  color:var(--white) !important;
  border-color:var(--gold) !important;
}


/* === LOSANGE OR — CSS pur, aucun emoji === */

/* t-dot ticker — losange or */


/* dd-icon dropdown — losange or dans carré crème */
.dd-icon{
  width:28px;
  height:28px;
  background:var(--gold-lt);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:0;
}
.dd-icon::after{
  content:'';
  display:block;
  width:7px;
  height:7px;
  background:var(--gold);
  transform:rotate(45deg);
  border-radius:0;
}

/* pill-diamond — losange or dans les pills hero */
.pill-diamond{
  display:block;
  width:8px;
  height:8px;
  background:var(--gold);
  transform:rotate(45deg);
  flex-shrink:0;
  border-radius:0;
}

/* === BOUTONS AFFINÉS — moins de padding, plus élégants === */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--ff-title);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.6rem 1.5rem;
  border-radius:6px;
  transition:all .25s ease;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
}
.btn-lg{
  padding:.7rem 1.75rem;
  font-size:.7rem;
}
.btn-sm{
  padding:.45rem 1.1rem;
  font-size:.62rem;
}

/* Style D — plein or clair */
.btn-gold{
  background:var(--gold-lt) !important;
  color:var(--gold-dk) !important;
  border:1px solid var(--gold) !important;
  border-radius:6px !important;
  box-shadow:none !important;
}
.btn-gold:hover{
  background:var(--gold) !important;
  color:var(--white) !important;
  border-color:var(--gold) !important;
  transform:translateY(-1px) !important;
}

/* Style D — vide discret */
.btn-outline{
  background:transparent !important;
  color:var(--muted) !important;
  border:1px solid var(--border) !important;
  border-radius:6px !important;
}
.btn-outline:hover{
  border-color:var(--gold) !important;
  color:var(--gold) !important;
  background:transparent !important;
}

/* Exceptions fond sombre → bouton or vif */
.cta-final .btn-gold,
.section-pro .btn-gold,
.sidebar-cta .btn-gold{
  background:var(--gold) !important;
  color:var(--white) !important;
  border-color:var(--gold) !important;
}
.cta-final .btn-gold:hover,
.section-pro .btn-gold:hover,
.sidebar-cta .btn-gold:hover{
  background:var(--gold-dk) !important;
  border-color:var(--gold-dk) !important;
}
.article-cta-box .btn{
  background:var(--gold) !important;
  color:var(--white) !important;
  border:1px solid var(--gold) !important;
}

/* ================================================================
   ELOXYMETAL V3 — BLOC UNIQUE FINAL (remplace toutes corrections)
   ================================================================ */

/* 1. HEADER TRANSPARENT → OPAQUE AU SCROLL */
#site-header,
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.15);
  box-shadow: none;
  transition: background .4s ease, border-color .4s, box-shadow .4s, transform .3s ease;
}
.site-header.header-opaque {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(200,200,200,.3);
  box-shadow: 0 2px 20px rgba(19,23,58,.07);
}
.site-header.header-hidden {
  transform: translateY(-110%);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  height: 72px;
  gap: 0;
}
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  margin-right: auto;
}

/* 2. NAV DESKTOP — Barlow Condensed 14px */
@media(min-width:769px) {
  .nav {
    display: flex !important;
    position: static !important;
    background: transparent !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
  }
}
.nav-link {
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--dark);
  padding: .5rem 1rem;
  text-decoration: none;
  position: relative;
  background: transparent;
  border-radius: 0;
  transition: color .2s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 1rem; right: 1rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-link:hover { color: var(--gold); }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--gold); }

/* Dropdown — losange seul, pas de carré */
.dd-icon {
  width: 14px; height: 14px;
  background: transparent;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dd-icon::after {
  content: '';
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  display: block;
}

/* 3. BURGER TIRETS OR */
.burger {
  background: none; border: none; cursor: pointer;
  padding: .5rem; flex-shrink: 0; display: none;
}
.burger span {
  display: block; width: 22px; height: 2px;
  background: var(--gold); border-radius: 2px;
  transition: .3s;
}
.burger span + span { margin-top: 5px; }
.burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* 4. NAV MOBILE — anthracite 93%, blanc, survol or */
@media(max-width:768px) {
  .burger { display: flex; flex-direction: column; margin-left: auto; order: 10; }
  .site-header .wrap { padding: 0 1.25rem; }

  .nav {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(22,22,22,.93) !important;
    backdrop-filter: blur(10px) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 4rem 2.5rem 2rem !important;
    z-index: 550 !important;
    overflow-y: auto !important;
    gap: 0 !important;
  }
  .nav.open { display: flex !important; }
  .nav-item { width: 100%; }
  .nav-link {
    font-size: 1.05rem !important;
    letter-spacing: 2px !important;
    color: rgba(255,255,255,.85) !important;
    padding: .8rem 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
  }
  .nav-link:hover, .nav-link.active {
    color: var(--gold) !important;
    background: transparent !important;
  }
  .nav-link::after { display: none !important; }
  .nav-arrow { border-color: rgba(255,255,255,.4) !important; }
  .dropdown {
    position: static !important; opacity: 1 !important;
    visibility: visible !important; transform: none !important;
    box-shadow: none !important; border: none !important;
    border-left: 2px solid rgba(200,168,75,.4) !important;
    border-radius: 0 !important;
    padding: .3rem 0 .3rem 1.25rem !important;
    background: transparent !important;
    margin-left: .5rem; min-width: unset;
  }
  .dd-link { color: rgba(255,255,255,.6) !important; padding: .35rem 0 !important; }
  .dd-link:hover { color: var(--gold) !important; background: transparent !important; }
  .dd-name { color: rgba(255,255,255,.8) !important; font-size: .75rem !important; }
  .dd-sub { color: rgba(255,255,255,.4) !important; }
}

/* 5. TICKER NOIR fond, blanc texte, losange or */

/* 6. STATS HERO — Cormorant Garamond 500 */
.stat-num {
  font-family: var(--ff-serif) !important;
  font-size: 2.4rem !important;
  font-weight: 500 !important;
  color: var(--dark) !important;
  line-height: 1 !important;
}
.stat-label {
  font-family: var(--ff-title) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin-top: .3rem !important;
}

/* 7. HERO TEXTE — animation d'apparition progressive */
.hero-content .eyebrow,
.hero-content h1,
.hero-services-row,
.hero-desc,
.hero-ctas,
.hero-stats {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-in .7s ease forwards;
}
.hero-content .eyebrow     { animation-delay: .1s; }
.hero-content h1           { animation-delay: .3s; }
.hero-services-row         { animation-delay: .5s; }
.hero-desc                 { animation-delay: .65s; }
.hero-ctas                 { animation-delay: .8s; }
.hero-stats                { animation-delay: .95s; }

@keyframes hero-in {
  to { opacity: 1; transform: translateY(0); }
}

/* 8. EXPERTISES — vignettes séparées + animation carte */
.expertises-grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 1.5rem !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.expertise-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: var(--shadow-s);
  /* État initial — hors écran vers le bas */
  opacity: 0;
  transform: translateY(40px) rotate(1deg);
  transition: opacity .5s ease, transform .5s ease, box-shadow .3s;
}
.expertise-card.is-visible {
  opacity: 1 !important;
  transform: translateY(0) rotate(0) !important;
}
.expertise-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-m) !important;
}
.expertise-img { width:100%; height:180px; overflow:hidden; flex-shrink:0; }
.expertise-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.expertise-card:hover .expertise-img img { transform:scale(1.05); }
.expertise-body { padding:1.5rem 1.75rem; display:flex; flex-direction:column; flex:1; }
.expertise-num { display:none !important; }
.expertise-title {
  font-family: var(--ff-serif) !important;
  font-size: 1.35rem !important;
  font-weight: 500 !important;
  color: var(--dark) !important;
  padding-bottom: .5rem; margin-bottom: .65rem;
  border-bottom: 1px solid var(--border);
}
.a2p { font-size: .85em; color: var(--gold); }
.expertise-desc {
  font-size: .875rem !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
  margin-bottom: .85rem !important;
}
.expertise-list {
  list-style: none !important; flex: 1;
  display: flex !important; flex-direction: column !important; gap: .35rem !important;
}
.expertise-list li {
  font-size: .8rem !important; color: #7a7571 !important;
  display: flex !important; align-items: center !important; gap: .5rem !important;
}
.expertise-list li::before {
  content: '' !important; width:5px !important; height:5px !important;
  background:var(--gold) !important; transform:rotate(45deg) !important; flex-shrink:0 !important;
}
.exp-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--ff-title); font-size: .65rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  margin-top: 1.1rem; padding-bottom: 2px;
  border-bottom: 1px solid transparent; transition: border-color .2s; width: fit-content;
}
.exp-link:hover { border-bottom-color: var(--gold); }
.exp-link::after { content: ' →'; }
@media(max-width:900px) { .expertises-grid { grid-template-columns: 1fr 1fr !important; } }
@media(max-width:580px) { .expertises-grid { grid-template-columns: 1fr !important; } }

/* 9. ART-HERO — articles blog */
.art-hero {
  position: relative;
  height: 420px; overflow: hidden; background: var(--dark);
}
.art-hero > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; opacity: .45;
  display: block;
}
.art-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(19,23,58,.92) 0%,
    rgba(19,23,58,.25) 55%,
    rgba(19,23,58,.02) 100%);
}
.art-hero-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 0 2.5rem 0;
}
.art-hero-cat {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(200,168,75,.18); border: 1px solid rgba(200,168,75,.4);
  color: var(--gold); font-family: var(--ff-title); font-size: .6rem;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  padding: .28rem .8rem; border-radius: 3px;
  margin-bottom: .75rem; width: fit-content;
}
.art-hero h1 {
  font-family: var(--ff-serif) !important;
  font-size: clamp(1.5rem,3.5vw,2.4rem) !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  max-width: 780px !important;
}
@media(max-width:768px) {
  .art-hero { height: 320px; }
  .art-hero h1 { font-size: 1.4rem !important; }
}

/* 10. BACK TO TOP */
.back-to-top {
  position: fixed; bottom: 1.75rem; right: 1.75rem;
  width: 44px; height: 44px;
  background: var(--gold); color: var(--white);
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 16px rgba(200,168,75,.35);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s, transform .3s; z-index: 999;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--gold-dk); transform: translateY(-2px); }
@media(max-width:768px) {
  .back-to-top { bottom: 1.25rem; right: 1.25rem; width: 42px; height: 42px; }
}

/* 11. BOUTONS STYLE D */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--ff-title); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .6rem 1.5rem; border-radius: 6px;
  transition: all .25s ease; white-space: nowrap;
  cursor: pointer; text-decoration: none;
}
.btn-lg { padding: .7rem 1.75rem; font-size: .7rem; }
.btn-gold {
  background: var(--gold-lt) !important;
  color: var(--gold-dk) !important;
  border: 1px solid var(--gold) !important;
}
.btn-gold:hover {
  background: var(--gold) !important;
  color: var(--white) !important;
  transform: translateY(-1px) !important;
}
.btn-outline {
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid var(--border) !important;
}
.btn-outline:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
/* Fond sombre */
.cta-final .btn-gold,
.section-pro .btn-gold,
.sidebar-cta .btn-gold {
  background: var(--gold) !important;
  color: var(--white) !important;
  border-color: var(--gold) !important;
}
.cta-final .btn-gold:hover,
.section-pro .btn-gold:hover,
.sidebar-cta .btn-gold:hover {
  background: var(--gold-dk) !important;
  border-color: var(--gold-dk) !important;
}

/* 12. MARGES MOBILE */
@media(max-width:768px) {
  .wrap { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .hero-content { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .article-layout { grid-template-columns: 1fr !important; padding: 2rem 0 !important; }
  .article-sidebar { position: static !important; }
  .hero-stats { grid-template-columns: 1fr 1fr !important; }
}

/* ================================================================
   BANDEAUX DÉFILANTS — page réalisations
   ================================================================ */

.photo-strip {
  overflow: hidden;
  background: var(--dark);
  padding: 0;
  line-height: 0;
}
.strip-track {
  display: flex;
  gap: 0;
  width: max-content;
}
.strip-right .strip-track { animation: strip-right 65s linear infinite; }
.strip-left  .strip-track { animation: strip-left  65s linear infinite; }
.strip-track:hover { animation-play-state: paused; }

.strip-item {
  position: relative;
  width: 320px;
  height: 220px;
  flex-shrink: 0;
  overflow: hidden;
}
.strip-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.strip-item:hover img { transform: scale(1.06); }
.strip-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19,23,58,.80) 0%, transparent 55%);
  opacity: 0; transition: opacity .3s;
  display: flex; flex-direction: column;
  justify-content: flex-end; padding: 1rem;
}
.strip-item:hover .strip-overlay { opacity: 1; }
.strip-cat {
  font-family: var(--ff-title); font-size: .6rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .2rem;
}
.strip-name {
  font-family: var(--ff-serif); font-size: .95rem;
  color: var(--white); line-height: 1.2;
}

@keyframes strip-right {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes strip-left {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media(max-width:768px) {
  .strip-item { width: 240px; height: 165px; }
}

/* ================================================================
   ART-HERO — entête articles (version propre, unique, sans doublon)
   ================================================================ */

/* Masquer l'ancien article-hero si présent */
.article-hero { display: none !important; }

header.art-hero,
div.art-hero {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: var(--dark);
  display: block;
}
header.art-hero > img,
div.art-hero > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .48;
  display: block;
  z-index: 0;
}
.art-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to top,
    rgba(19,23,58,.90) 0%,
    rgba(19,23,58,.20) 50%,
    rgba(19,23,58,.00) 100%
  );
}
.art-hero-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  justify-content: flex-end;
}
.art-hero-content .wrap {
  padding-bottom: 2.5rem;
}
.art-hero-cat {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(200,168,75,.16);
  border: 1px solid rgba(200,168,75,.45);
  color: var(--gold);
  font-family: var(--ff-title); font-size: .6rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .25rem .75rem; border-radius: 3px;
  margin-bottom: .7rem; width: fit-content;
}
.art-hero h1,
header.art-hero h1 {
  font-family: var(--ff-serif) !important;
  font-size: clamp(1.5rem, 3.5vw, 2.4rem) !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  max-width: 800px !important;
  margin: 0 !important;
}
@media(max-width:768px) {
  header.art-hero, div.art-hero { height: 300px; }
  .art-hero h1, header.art-hero h1 { font-size: 1.35rem !important; }
}


/* ================================================================
   BANDEAUX DÉFILANTS + DROPDOWN MOBILE FIX
   ================================================================ */

/* BANDEAUX PHOTO */
.photo-strip {
  overflow: hidden;
  background: var(--dark);
  line-height: 0;
  display: block;
}
.strip-track {
  display: flex;
  gap: 0;
  width: max-content;
  will-change: transform;
}
.strip-track--right { animation: strip-right 65s linear infinite; }
.strip-track--left  { animation: strip-left  65s linear infinite; }
.strip-track:hover  { animation-play-state: paused; }

.strip-item {
  position: relative;
  width: 300px;
  height: 220px;
  flex-shrink: 0;
  overflow: hidden;
}
.strip-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.strip-item:hover img { transform: scale(1.05); }
.strip-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19,23,58,.82) 0%, transparent 55%);
  opacity: 0; transition: opacity .3s;
  display: flex; flex-direction: column;
  justify-content: flex-end; padding: 1rem;
}
.strip-item:hover .strip-overlay { opacity: 1; }
.strip-cat {
  font-family: var(--ff-title); font-size: .58rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .2rem; display: block;
}
.strip-name {
  font-family: var(--ff-serif); font-size: .95rem;
  color: var(--white); line-height: 1.2; display: block;
}


@media(max-width:768px) {
  .strip-item { width: 220px; height: 160px; }
}

/* DROPDOWN MOBILE — 100% visible, fond anthracite */
@media(max-width:768px) {
  .nav-item:hover > .dropdown,
  .nav-item > .dropdown {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    border-left: 2px solid rgba(200,168,75,.5) !important;
    border-radius: 0 !important;
    padding: .35rem 0 .35rem 1.25rem !important;
    margin-left: .75rem !important;
    min-width: unset !important;
    display: block !important;
  }
  .dd-link {
    display: flex !important;
    padding: .4rem 0 !important;
    color: rgba(255,255,255,.72) !important;
    text-decoration: none;
  }
  .dd-link:hover { color: var(--gold) !important; }
  .dd-name {
    font-family: var(--ff-title) !important;
    font-size: .75rem !important; font-weight: 600 !important;
    text-transform: uppercase !important; letter-spacing: .06em !important;
    color: rgba(255,255,255,.82) !important;
  }
  .dd-sub {
    font-family: var(--ff-title) !important;
    font-size: .65rem !important; font-weight: 400 !important;
    color: rgba(255,255,255,.42) !important;
  }
}


/* ================================================================
   BANDEAUX DÉFILANTS HOME — section portfolio accueil
   ================================================================ */

/* Section wrapper — fond or pâle, padding = gap vignettes (1.25rem) */
.section-portfolio-strips {
  background: var(--gold-lt);
  padding: 3.5rem 0;
}
.portfolio-strips-head {
  margin-bottom: 2.5rem;
}

/* Wrap bandeau — bordure or haut+bas, overflow hidden */
.home-strip-wrap {
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  overflow: hidden;
  padding: 1.25rem 0;       /* même gap vertical que la grille */
  background: var(--gold-lt);
}
/* Espacement entre les 2 bandeaux = gap vignettes */
.home-strip-wrap + .home-strip-wrap {
  margin-top: 1.25rem;
  border-top: 1px solid var(--gold);
}

/* Track animé */
.home-strip-track {
  display: flex;
  gap: 1.25rem;             /* même gap horizontal que la grille */
  width: max-content;
  will-change: transform;
}
.home-strip-track--right { animation: strip-right 65s linear infinite; }
.home-strip-track--left  { animation: strip-left  65s linear infinite; }
.home-strip-track:hover  { animation-play-state: paused; }

/* Vignettes — mêmes proportions que portfolio-item 4/3 */
.home-strip-item {
  position: relative;
  width: 280px;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(200,168,75,.4);
  box-shadow: 0 2px 8px rgba(200,168,75,.12);
  transition: box-shadow .3s;
}
.home-strip-item:hover {
  box-shadow: 0 4px 18px rgba(200,168,75,.28);
}
.home-strip-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.home-strip-item:hover img { transform: scale(1.06); }

/* Overlay texte */
.home-strip-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19,23,58,.82) 0%, transparent 52%);
  opacity: 0; transition: opacity .3s;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 1.1rem;
}
.home-strip-item:hover .home-strip-overlay { opacity: 1; }
.home-strip-cat {
  font-family: var(--ff-title); font-size: .58rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .2rem; display: block;
}
.home-strip-name {
  font-family: var(--ff-serif); font-size: .9rem;
  color: var(--white); line-height: 1.2; display: block;
}

/* Mobile — vignettes un peu plus petites */
@media(max-width:768px) {
  .home-strip-item { width: 200px; }
  .home-strip-wrap { padding: 1rem 0; }
  .home-strip-wrap + .home-strip-wrap { margin-top: 1rem; }
  .home-strip-track { gap: 1rem; }
}

/* ================================================================
   NAV — Supprimer surbrillance fond, garder seulement liseret or
   ================================================================ */
.nav-link {
  background: none !important;
}
.nav-link:hover,
.nav-link.active {
  background: none !important;
  color: var(--gold) !important;
}
/* Liseret or sur page active — permanent, pas seulement au hover */
.nav-link.active::after {
  transform: scaleX(1) !important;
  background: var(--gold) !important;
}


/* ================================================================
   BADGES FLOTTANTS + LAYOUT ALTERNANCE + LIENS INLINE
   ================================================================ */

/* Layout alternance — image droite */
.service-split--rev {
  flex-direction: row-reverse !important;
}

/* .rev existant — remis en ordre normal (image gauche) */
.service-split.rev {
  flex-direction: row !important;
}

/* Titre — mot en or */
.gold-em {
  font-style: italic;
  color: var(--gold) !important;
}

/* Suppression liseret or entre titre et texte — métallerie */
.split-text .gold-sep--left {
  display: none !important;
}

/* Zone intervention */
.zone-intervention {
  font-size: .82rem !important;
  color: var(--muted) !important;
  font-style: italic !important;
  margin-top: .85rem !important;
  padding-top: .85rem !important;
  border-top: 1px solid var(--border) !important;
}

/* Liens inline dans les textes */
.inline-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(200,168,75,.4);
  transition: border-color .2s, color .2s;
}
.inline-link:hover {
  color: var(--gold-dk);
  border-bottom-color: var(--gold);
}

/* Image métallerie — pas de border-radius */
.split-img--badges img {
  border-radius: 0 !important;
}

/* Container image avec badges */
.split-img--badges {
  position: relative;
}

/* Badges flottants à cheval sur la bordure de l'image */
.img-badge {
  position: absolute;
  bottom: -16px;
  padding: .55rem 1.25rem;
  font-family: var(--ff-title);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

/* Badge blanc — Thermolaqué */
.img-badge--white {
  right: 2.5rem;
  background: var(--white);
  color: var(--dark);
  border: 1px solid var(--gold);
  box-shadow: 0 2px 12px rgba(200,168,75,.15);
}

/* Badge noir — Sur mesure */
.img-badge--black {
  right: calc(2.5rem + 140px + .75rem);
  background: var(--dark);
  color: var(--gold);
  border: 1px solid rgba(200,168,75,.35);
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}

/* Marges pour laisser la place aux badges */
.split-img--badges + .split-text,
.service-split--rev .split-text {
  padding-bottom: 1.5rem;
}

@media(max-width:900px) {
  .service-split--rev {
    flex-direction: column !important;
  }
  .img-badge {
    position: static;
    display: inline-flex;
    margin: 0 .35rem;
    bottom: auto;
  }
  .split-img--badges::after {
    content: '';
    display: block;
    height: 2.5rem;
  }
  .split-img--badges .img-badge--black {
    right: auto;
  }
  .split-img--badges .img-badge--white {
    right: auto;
  }
  /* Sur mobile — badges sous l'image en ligne */
  .split-img--badges {
    display: flex;
    flex-direction: column;
  }
  .split-img--badges img {
    order: 1;
  }
  .split-img--badges .img-badge {
    order: 2;
    position: static;
    margin-top: .5rem;
    align-self: flex-start;
  }
  .img-badge--black {
    margin-left: .5rem !important;
  }
}


/* ================================================================
   FIX BADGES + RADIUS + ALTERNANCE
   ================================================================ */

/* Forcer radius 0 sur image métallerie */
.split-img--badges img {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}
/* Forcer radius 0 aussi sur le container de l'image split */
.split-img img {
  border-radius: 0 !important;
}

/* Alternance — image droite */
.service-split.service-split--rev {
  flex-direction: row-reverse !important;
}
/* Serrurerie — image gauche, s'assurer pas de rev */
.service-split:not(.service-split--rev) {
  flex-direction: row !important;
}

/* BADGES — repositionnés à cheval sur le bord externe */
.split-img--badges {
  position: relative;
  overflow: visible !important; /* Permettre aux badges de dépasser */
}
.split-img--badges img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badge NOIR — à cheval sur le bord HAUT, 1/10ème depuis la gauche */
.img-badge--black {
  position: absolute;
  top: 0;
  left: 10%;
  transform: translateY(-50%);
  background: #0d0d0d;
  color: var(--gold);
  border: 1px solid rgba(200,168,75,.5);
  padding: .5rem 1.1rem;
  font-family: var(--ff-title);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* Badge BLANC — à cheval sur le bord BAS, 1/10ème depuis la droite */
.img-badge--white {
  position: absolute;
  bottom: 0;
  right: 10%;
  transform: translateY(50%);
  background: #ffffff;
  color: #0d0d0d;
  border: 1px solid var(--gold);
  padding: .5rem 1.1rem;
  font-family: var(--ff-title);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(200,168,75,.2);
}

/* Mobile — badges en ligne sous l'image */
@media(max-width:900px) {
  .split-img--badges {
    overflow: visible !important;
  }
  .img-badge--black,
  .img-badge--white {
    position: static;
    transform: none;
    display: inline-flex;
    margin: .5rem .35rem 0 0;
    align-self: flex-start;
  }
  .split-img--badges {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
}


/* ================================================================
   CORRECTIONS FINALES — radius + alternance mobile
   ================================================================ */

/* Radius 0 sur toutes les images des sections split */
.split-img img,
.split-img--badges img,
.img-no-radius {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}
/* Forcer aussi le container */
.split-img,
.split-img--badges {
  border-radius: 0 !important;
}

/* ALTERNANCE DESKTOP : service-split--rev → image à droite */
@media(min-width:901px) {
  .service-split--rev {
    flex-direction: row-reverse !important;
  }
}

/* ALTERNANCE MOBILE : toujours image EN HAUT, texte EN BAS
   Peu importe si --rev ou pas → ordre : img=1, text=2 */
@media(max-width:900px) {
  .service-split,
  .service-split--rev {
    flex-direction: column !important;
  }
  /* Image toujours en premier sur mobile */
  .service-split .split-img,
  .service-split .split-img--badges,
  .service-split--rev .split-img,
  .service-split--rev .split-img--badges {
    order: 1 !important;
  }
  .service-split .split-text,
  .service-split--rev .split-text {
    order: 2 !important;
  }
}

/* BADGES — repositionnement correct */
.split-img--badges {
  position: relative;
  overflow: visible !important;
}
.img-badge--black {
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateY(-50%) !important;
  background: #0d0d0d !important;
  color: var(--gold) !important;
  border: 1px solid rgba(200,168,75,.5) !important;
  padding: .5rem 1.1rem !important;
  font-family: var(--ff-title) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  z-index: 5 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}
.img-badge--white {
  position: absolute !important;
  bottom: 0 !important;
  right: 10% !important;
  top: auto !important;
  left: auto !important;
  transform: translateY(50%) !important;
  background: #ffffff !important;
  color: #0d0d0d !important;
  border: 1px solid var(--gold) !important;
  padding: .5rem 1.1rem !important;
  font-family: var(--ff-title) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  z-index: 5 !important;
  box-shadow: 0 2px 8px rgba(200,168,75,.2) !important;
}
/* Mobile : badges en ligne sous l'image */
@media(max-width:900px) {
  .img-badge--black,
  .img-badge--white {
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    margin: .4rem .4rem 0 0 !important;
  }
  .split-img--badges {
    display: flex !important;
    flex-direction: column !important;
  }
}


/* ================================================================
   CORRECTIONS LOT — Expertises + Alternance + Badges + Liens
   ================================================================ */

/* 1. ALTERNANCE — forcer avec priorité maximale */
@media(min-width:901px) {
  .service-split { flex-direction: row !important; }
  .service-split.service-split--rev { flex-direction: row-reverse !important; }
}
@media(max-width:900px) {
  .service-split,
  .service-split.service-split--rev { flex-direction: column !important; }
  .service-split .split-img,
  .service-split.service-split--rev .split-img,
  .service-split .split-img--badges,
  .service-split.service-split--rev .split-img--badges { order: 1 !important; }
  .service-split .split-text,
  .service-split.service-split--rev .split-text { order: 2 !important; }
}

/* 2. EXPERTISE CARDS — plus hautes */
.expertise-img {
  height: 220px !important;
}
.expertise-body {
  padding: 1.75rem 1.75rem !important;
}
.expertise-card {
  min-height: 480px;
}
@media(max-width:768px) {
  .expertise-img { height: 200px !important; }
  .expertise-card { min-height: unset; }
}

/* 3. LÉGENDE PHOTO dans expertise */
.expertise-caption {
  background: rgba(19,23,58,.82);
  color: rgba(255,255,255,.85);
  font-family: var(--ff-title);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: none;
  font-style: italic;
  padding: .45rem .85rem;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  line-height: 1.4;
}
.expertise-img {
  position: relative;
}

/* 4. BADGE BLANC — à 1/3 depuis le bas, 1/10 depuis la droite */
.img-badge--white {
  bottom: 33% !important;
  right: 10% !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}
/* Badge noir reste en haut gauche */
.img-badge--black {
  top: 0 !important;
  left: 10% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}

/* 5. LIENS OR — soulignés */
.inline-link {
  color: var(--gold) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(200,168,75,.5) !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
  border-bottom: none !important;
  transition: text-decoration-color .2s !important;
}
.inline-link:hover {
  text-decoration-color: var(--gold) !important;
  color: var(--gold-dk) !important;
}

/* 6. ZONE INTERVENTION — sur les 3 sections */
.zone-intervention {
  font-size: .82rem !important;
  color: var(--muted) !important;
  font-style: italic !important;
  margin-top: .85rem !important;
  padding-top: .85rem !important;
  border-top: 1px solid var(--border) !important;
}

/* 7. RADIUS 0 — forcer partout sur images split */
.split-img img,
.split-img--badges img {
  border-radius: 0 !important;
}


/* ================================================================
   FIX DÉFINITIF — Alternance grid (pas flex) + badge blanc + hauteur photo métallerie
   ================================================================ */

/* Alternance GRID — placer image à droite pour --rev */
@media(min-width:901px) {
  /* Normal : image gauche (col 1), texte droite (col 2) — défaut */
  .service-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  /* Inversé : image droite (col 2), texte gauche (col 1) */
  .service-split.service-split--rev .split-img,
  .service-split.service-split--rev .split-img--badges {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .service-split.service-split--rev .split-text {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
}

/* Mobile — empiler image au-dessus du texte */
@media(max-width:900px) {
  .service-split,
  .service-split.service-split--rev {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .service-split .split-img,
  .service-split .split-img--badges,
  .service-split.service-split--rev .split-img,
  .service-split.service-split--rev .split-img--badges {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1 !important;
  }
  .service-split .split-text,
  .service-split.service-split--rev .split-text {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 2 !important;
  }
}

/* Photo section métallerie — format correct, objet-fit cover */
.split-img img,
.split-img--badges img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}
.split-img,
.split-img--badges {
  min-height: 480px;
  height: 100%;
  overflow: hidden;
}

/* Badge blanc — sur le bord droit, 10% à l'extérieur, à 10% depuis le bas */
.img-badge--white {
  position: absolute !important;
  bottom: 10% !important;
  right: 0 !important;
  top: auto !important;
  left: auto !important;
  transform: translateX(10%) !important;
  background: #ffffff !important;
  color: #0d0d0d !important;
  border: 1px solid var(--gold) !important;
  padding: .5rem 1.1rem !important;
  font-family: var(--ff-title) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  z-index: 5 !important;
  box-shadow: 0 2px 8px rgba(200,168,75,.2) !important;
}

/* Badge noir — bord haut, 10% dehors, à 10% depuis la gauche */
.img-badge--black {
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateY(-10%) !important;
  background: #0d0d0d !important;
  color: var(--gold) !important;
  border: 1px solid rgba(200,168,75,.5) !important;
  padding: .5rem 1.1rem !important;
  font-family: var(--ff-title) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  z-index: 5 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}

/* Mobile — badges en ligne */
@media(max-width:900px) {
  .img-badge--black,
  .img-badge--white {
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    margin: .4rem .4rem 0 0 !important;
  }
}


/* ================================================================
   EXPERTISES — hauteur +10% + zoom intérieur + fix mobile badges
   ================================================================ */

/* Photo +10% de hauteur (220px → 242px) */
.expertise-img {
  height: 242px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Zoom photo à l'intérieur — le container reste fixe */
.expertise-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform .5s ease !important;
  display: block !important;
}
.expertise-card:hover .expertise-img img {
  transform: scale(1.06) !important;
}

/* Légende caption dans expertise-img */
.expertise-caption {
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  background: rgba(19,23,58,.78) !important;
  color: rgba(255,255,255,.9) !important;
  font-size: .62rem !important;
  font-style: italic !important;
  padding: .4rem .85rem !important;
  letter-spacing: .04em !important;
  line-height: 1.4 !important;
}

/* Corps de la vignette — légèrement plus aéré */
.expertise-body {
  padding: 1.6rem 1.6rem 2rem !important;
}

/* Mobile — vignette pleine largeur, image 220px */
@media(max-width:600px) {
  .expertise-img { height: 220px !important; }
}

/* ================================================================
   BADGES SUR MOBILE — collés à la photo, pas dessous
   ================================================================ */

/* Sur mobile, le container split-img reste en position relative
   et les badges restent en absolute DANS la photo */
@media(max-width:900px) {
  .split-img--badges {
    position: relative !important;
    overflow: visible !important;
    /* Ne pas passer en flex — garder les badges absolus */
  }
  /* Badges restent absolus, petits sur mobile */
  .img-badge--black,
  .img-badge--white {
    font-size: .55rem !important;
    padding: .35rem .75rem !important;
  }
  /* Badge noir — haut gauche, légèrement dedans sur mobile */
  .img-badge--black {
    top: 0 !important;
    left: 8% !important;
    transform: translateY(-40%) !important;
  }
  /* Badge blanc — bas droite, légèrement dehors */
  .img-badge--white {
    bottom: 10% !important;
    right: 0 !important;
    transform: translateX(8%) !important;
  }
}


/* ================================================================
   EXPERTISE CARDS — allonger en hauteur
   ================================================================ */
.expertise-card {
  min-height: 620px !important;
  display: flex !important;
  flex-direction: column !important;
}
.expertise-img {
  height: 280px !important;
  flex-shrink: 0 !important;
}
.expertise-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 1.8rem 1.8rem 2.2rem !important;
}
/* Tablette — un peu moins haut pour ne pas déborder */
@media(max-width:1024px) and (min-width:601px) {
  .expertise-card { min-height: 560px !important; }
  .expertise-img  { height: 240px !important; }
}
/* Mobile — hauteur auto */
@media(max-width:600px) {
  .expertise-card { min-height: unset !important; }
  .expertise-img  { height: 220px !important; }
}


/* ================================================================
   EXPERTISE — hauteur x2 de l'incrément précédent
   + BADGES — toujours positionnés sur la photo, jamais dessous
   ================================================================ */

/* Desktop : 620 + 140 = 760px / photo 280 + 38 = 318px */
.expertise-card { min-height: 760px !important; }
.expertise-img  { height: 318px !important; }

/* Tablette */
@media(max-width:1024px) and (min-width:601px) {
  .expertise-card { min-height: 680px !important; }
  .expertise-img  { height: 280px !important; }
}
/* Mobile */
@media(max-width:600px) {
  .expertise-card { min-height: unset !important; }
  .expertise-img  { height: 240px !important; }
}

/* BADGES — toujours absolus dans split-img, jamais static */
.split-img--badges {
  position: relative !important;
  overflow: visible !important;
}
.img-badge--black,
.img-badge--white {
  position: absolute !important;
  display: block !important;
}
/* Badge noir — haut gauche, à cheval sur le bord haut */
.img-badge--black {
  top: 0 !important;
  left: 10% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}
/* Badge blanc — bas droite, 10% dehors, à 10% depuis le bas */
.img-badge--white {
  bottom: 10% !important;
  right: 0 !important;
  top: auto !important;
  left: auto !important;
  transform: translateX(10%) !important;
}
/* Mobile — même chose mais taille réduite */
@media(max-width:900px) {
  .img-badge--black,
  .img-badge--white {
    position: absolute !important;
    display: block !important;
    font-size: .55rem !important;
    padding: .35rem .75rem !important;
  }
  .img-badge--black {
    top: 0 !important;
    left: 8% !important;
    transform: translateY(-50%) !important;
  }
  .img-badge--white {
    bottom: 10% !important;
    right: 0 !important;
    transform: translateX(8%) !important;
  }
}


/* ================================================================
   SPECS — design exact site actif (grid 2×2, border-left or)
   BADGES — position:relative sur container + absolute sur badges
   ================================================================ */

/* SPECS — reproduire exactement le design constaté */
.split-specs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.25rem 1.5rem !important;
  margin-top: 1.5rem !important;
}
.spec {
  border-left: 2px solid var(--gold) !important;
  padding-left: .85rem !important;
  background: transparent !important;
}
.spec-label {
  display: block !important;
  font-family: var(--ff-title) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin-bottom: .2rem !important;
}
.spec-val {
  display: block !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: var(--dark) !important;
  line-height: 1.2 !important;
}

/* BADGES — container MUST be position:relative + overflow:visible */
.split-img--badges {
  position: relative !important;
  overflow: visible !important;
}
/* BADGE NOIR — haut gauche, à cheval sur le bord haut */
.img-badge--black {
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  background: var(--dark) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(200,168,75,.45) !important;
  padding: .5rem 1.1rem !important;
  font-family: var(--ff-title) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  z-index: 10 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
/* BADGE BLANC — bas droite, à cheval sur le bord bas, 10% dehors */
.img-badge--white {
  position: absolute !important;
  bottom: 10% !important;
  right: 0 !important;
  left: auto !important;
  top: auto !important;
  transform: translateX(10%) !important;
  background: #fff !important;
  color: var(--dark) !important;
  border: 1px solid var(--gold) !important;
  padding: .5rem 1.1rem !important;
  font-family: var(--ff-title) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  z-index: 10 !important;
  box-shadow: 0 2px 8px rgba(200,168,75,.2) !important;
}
/* Mobile — badges plus petits mais toujours absolus */
@media(max-width:900px) {
  .img-badge--black,
  .img-badge--white {
    font-size: .52rem !important;
    padding: .3rem .65rem !important;
  }
  .img-badge--white {
    transform: translateX(6%) !important;
  }
}

/* Image métallerie — couverture correcte sans radius */
.split-img img,
.split-img--badges img {
  border-radius: 0 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 480px !important;
}
.split-img,
.split-img--badges {
  min-height: 480px !important;
  max-height: 560px !important;
}


/* ═══════════════════════════════════════════════════════════════
   ARTICLES — typographie, figures et colonne latérale
   Ajouté le 5 août 2026. Placé en fin de fichier pour primer
   sur les règles antérieures.
   ═══════════════════════════════════════════════════════════════ */

/* ── Rythme des paragraphes ────────────────────────────────── */
.article-content p{margin-bottom:1.35rem}
.article-content p:last-child{margin-bottom:0}
.article-content strong{color:var(--dark);font-weight:600}

/* ── Titres : filet doré sous les H2 ───────────────────────── */
.article-content h2{position:relative;padding-bottom:.6rem;margin:3rem 0 1.1rem}
.article-content h2::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:2px;background:var(--gold)}
.article-content h2:first-child{margin-top:0}
.article-content h3{margin:2rem 0 .6rem;color:var(--dark)}

/* ── Figures : photo + légende ─────────────────────────────── */
.article-content figure{margin:2.25rem 0}
.article-content figure img{display:block;width:100%;height:auto;border-radius:var(--r-lg,4px);box-shadow:0 2px 18px rgba(19,23,58,.10)}
.article-content figcaption{margin-top:.7rem;padding-left:.9rem;border-left:2px solid var(--gold);font-size:.85rem;line-height:1.5;color:#6b6557;font-style:italic}
.article-content figure + figure{margin-top:1.5rem}

/* ── Colonne latérale collante ─────────────────────────────── */
/* Le décalage venait d'une règle « mobile » écrite hors media query,
   corrigée plus haut dans ce fichier. Plus besoin de !important. */
@media(min-width:901px){
  .article-layout{align-items:start}
  .article-sidebar{position:sticky;top:96px;align-self:start}
}

/* ── Mobile ────────────────────────────────────────────────── */
@media(max-width:900px){
  .article-content figure{margin:1.75rem 0}
  .article-content figcaption{font-size:.8rem}
  .article-content h2{margin:2.25rem 0 .9rem;font-size:1.4rem}
}