:root{
  --ink:#131b20;--ink2:#202a30;--gold:#c59a55;--gold2:#e0bd7d;
  --paper:#faf8f4;--stone:#f0ece5;--white:#fff;--text:#2c3438;--muted:#737a7d;
  --line:rgba(19,27,32,.14);--shadow:0 24px 70px rgba(17,24,28,.12);
  --serif:Georgia,"Times New Roman",serif;--sans:Inter,Arial,Helvetica,sans-serif;
}

/* Navigation V3.3 — typographie plus nette et légèrement agrandie */
.nav-links{
  font-family:"Inter","Segoe UI",Arial,sans-serif;
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.025em;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.nav-links>a:not(.nav-contact){opacity:.94}
.nav-drop-toggle{
  font-family:inherit;
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.025em;
  opacity:.94;
}
.nav-submenu a{
  font-size:.71rem;
  line-height:1.35;
  letter-spacing:.015em;
  color:rgba(255,255,255,.82);
}
.nav-subgroup-toggle{font-size:.73rem;text-transform:capitalize}
.nav-submenu a b{font-size:.73rem;font-weight:700;text-transform:capitalize}
.nav-submenu a small{font-size:.62rem;letter-spacing:.005em;color:rgba(255,255,255,.58)}
@media(max-width:1120px){
  .nav-links,.nav-drop-toggle{font-size:.62rem}
}
@media(max-width:800px){
  .nav-links,.nav-drop-toggle{font-size:.72rem}
  .nav-submenu a,.nav-subgroup-toggle{font-size:.7rem}
  .nav-submenu-level2 a{font-size:.67rem}
}

/* Module interactif — personnalisation de la pergola */
.pergola-configurator{background:#f4f0e9;overflow:visible}.configurator-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:28px}.configurator-heading h2{margin-bottom:0}.configurator-heading>p{max-width:440px;color:var(--muted);margin:0}.pergola-visual{position:relative;min-height:690px;border-radius:3px;overflow:visible;background:#111b20;box-shadow:0 24px 65px rgba(19,27,32,.16)}.pergola-visual>img{width:100%;height:690px;display:block;object-fit:cover;border-radius:3px;filter:saturate(.94) contrast(1.03)}.pergola-visual:after{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}.pergola-hotspot{position:absolute;z-index:3}.hotspot-lames{left:44%;top:26%}.hotspot-structure{right:13%;top:18%}.hotspot-evacuation{right:8%;bottom:9%}.hotspot-button{width:48px;height:48px;border:1px solid rgba(255,255,255,.8);border-radius:50%;display:grid;place-items:center;background:rgba(19,27,32,.76);color:#fff;box-shadow:0 0 0 9px rgba(255,255,255,.15),0 10px 24px rgba(0,0,0,.26);backdrop-filter:blur(8px);cursor:pointer;transition:transform .25s ease,background .25s ease,box-shadow .25s ease}.hotspot-button span[aria-hidden]{font:300 1.55rem/1 Arial;transition:transform .25s ease}.pergola-hotspot:hover .hotspot-button,.pergola-hotspot.open .hotspot-button,.hotspot-button:focus-visible{transform:scale(1.08);background:var(--gold);color:#10181d;box-shadow:0 0 0 10px rgba(175,132,77,.22),0 12px 28px rgba(0,0,0,.3);outline:none}.pergola-hotspot:hover .hotspot-button span[aria-hidden],.pergola-hotspot.open .hotspot-button span[aria-hidden]{transform:rotate(45deg)}.hotspot-panel{position:absolute;width:270px;left:65px;top:50%;padding:20px 21px 18px;background:rgba(247,244,238,.97);color:#172027;border:1px solid rgba(175,132,77,.38);box-shadow:0 20px 48px rgba(13,20,24,.24);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translate(8px,-50%);transition:opacity .22s ease,transform .22s ease,visibility .22s;pointer-events:none}.hotspot-panel:before{content:"";position:absolute;right:100%;top:50%;width:16px;height:1px;background:var(--gold)}.pergola-hotspot:hover .hotspot-panel,.pergola-hotspot:focus-within .hotspot-panel,.pergola-hotspot.open .hotspot-panel{opacity:1;visibility:visible;transform:translate(0,-50%);pointer-events:auto}.hotspot-kicker{display:block;color:var(--gold);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:4px}.hotspot-panel strong{display:block;font-family:var(--display);font-size:1.45rem;font-weight:500}.hotspot-panel small{display:block;margin-top:11px;color:var(--muted);font-size:.65rem;letter-spacing:.04em}.swatch-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.swatch-row span{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:8px;font-size:.67rem}.swatch-row i{width:28px;height:28px;border-radius:50%;background:var(--swatch);border:1px solid rgba(19,27,32,.14);box-shadow:inset 0 0 0 3px rgba(255,255,255,.45)}.finish-row{display:flex;gap:6px;margin-top:13px}.finish-row span{padding:6px 9px;border:1px solid rgba(19,27,32,.15);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}.evacuation-panel{width:390px;left:auto;right:65px}.evacuation-panel:before{right:auto;left:100%}.evacuation-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:14px}.evacuation-grid span{font-size:.54rem;text-align:center;text-transform:uppercase;letter-spacing:.03em}.drain{position:relative;display:block;height:43px;margin-bottom:6px;background:linear-gradient(135deg,#3a4144,#1d2529);border-radius:2px}.drain:after{content:"";position:absolute;background:#b0834d}.drain-standard:after{width:22px;height:4px;left:50%;bottom:7px;transform:translateX(-50%)}.drain-tab:after{width:26px;height:7px;left:50%;bottom:3px;transform:translateX(-50%) skewX(-20deg)}.drain-out:after{width:13px;height:13px;border-radius:50%;right:-4px;bottom:12px;border:3px solid #ddd;background:#20282c}.drain-gutter:after{width:24px;height:8px;right:-3px;top:7px;box-shadow:8px 7px 0 -2px #b0834d}.drain-in:after{width:15px;height:24px;left:50%;bottom:0;transform:translateX(-50%);background:linear-gradient(90deg,#b0834d 0 3px,transparent 3px 12px,#b0834d 12px)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.pergola-visual,.pergola-visual>img{min-height:590px;height:590px}.hotspot-lames{left:40%;top:25%}.hotspot-structure{right:10%;top:18%}.hotspot-evacuation{right:7%;bottom:10%}.hotspot-panel{left:auto;right:60px}.hotspot-panel:before{right:auto;left:100%}.hotspot-lames .hotspot-panel{left:60px;right:auto}.hotspot-lames .hotspot-panel:before{left:auto;right:100%}.evacuation-panel{width:360px}}
@media(max-width:600px){.configurator-heading{display:block}.configurator-heading>p{margin-top:10px}.pergola-visual,.pergola-visual>img{min-height:520px;height:520px}.pergola-visual>img{object-position:57% center}.hotspot-button{width:42px;height:42px}.hotspot-lames{left:34%;top:28%}.hotspot-structure{right:8%;top:17%}.hotspot-evacuation{right:7%;bottom:8%}.hotspot-panel,.hotspot-lames .hotspot-panel,.evacuation-panel{position:fixed;z-index:50;left:18px;right:18px;top:auto;bottom:18px;width:auto;transform:translateY(12px);border-radius:2px}.hotspot-panel:before{display:none}.pergola-hotspot:hover .hotspot-panel,.pergola-hotspot:focus-within .hotspot-panel,.pergola-hotspot.open .hotspot-panel{transform:translateY(0)}.evacuation-grid{gap:5px}.drain{height:38px}}

/* V34.2 — nouveau visuel de personnalisation */
.pergola-configurator .pergola-visual{min-height:auto;aspect-ratio:4/3}
.pergola-configurator .pergola-visual>img{height:100%;min-height:0;object-position:center;filter:none}
.pergola-configurator .hotspot-lames{left:66%;top:42%}
.pergola-configurator .hotspot-structure{right:19.5%;top:37%}
.pergola-configurator .hotspot-evacuation{right:37%;bottom:25%}
@media(max-width:600px){
  .pergola-configurator .pergola-visual{height:auto;min-height:auto;aspect-ratio:4/3}
  .pergola-configurator .pergola-visual>img{height:100%;min-height:0;object-position:center}
  .pergola-configurator .hotspot-lames{left:65%;top:41%}
  .pergola-configurator .hotspot-structure{right:18%;top:36%}
  .pergola-configurator .hotspot-evacuation{right:36%;bottom:24%}
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);line-height:1.65;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:auto;backface-visibility:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}
.shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}.narrow{width:min(840px,100%)}.section{padding:112px 0}.soft{background:var(--stone)}.dark{background:var(--ink);color:#fff}
h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.03em}h2{font-size:clamp(2.25rem,4.5vw,4.6rem);line-height:1.02;margin-bottom:24px}h3{font-size:1.55rem;line-height:1.15}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.68rem;font-weight:800;color:var(--gold);margin-bottom:14px}.eyebrow.light{color:var(--gold2)}.prose{font-size:1.05rem;color:#596064}.prose strong{color:var(--ink)}.light-prose{color:rgba(255,255,255,.72)}.text-link{display:inline-block;margin-top:12px;color:var(--gold);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:52px;padding:0 24px;border:1px solid transparent;text-transform:uppercase;letter-spacing:.09em;font-weight:800;font-size:.72rem;transition:.25s}
/* texte anthracite sur or : contraste 6,74:1 (WCAG AA) au lieu de 2,58:1 en blanc */
.button.gold{background:var(--gold);color:#131b20}.button.gold:hover{background:#d8ae66;color:#131b20;transform:translateY(-2px)}.button.outline{border-color:rgba(255,255,255,.6);color:#fff}.button.outline:hover{background:#fff;color:var(--ink)}.button.dark{background:var(--ink);color:#fff}.button.dark:hover{background:var(--gold)}.button.outline-dark{border-color:var(--ink);color:var(--ink);background:transparent}
.button.outline-light{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}.button.outline-light:hover{border-color:var(--gold2);background:rgba(255,255,255,.08);color:#fff}
.hidden{display:none!important}

/* Header */
.site-header{position:fixed;inset:0 0 auto;z-index:100;height:86px;border-bottom:1px solid rgba(255,255,255,.14);background:linear-gradient(to bottom,rgba(10,15,18,.72),rgba(10,15,18,.1));transition:.25s}.site-header.scrolled{height:70px;background:rgba(15,22,26,.98);box-shadow:0 8px 30px rgba(0,0,0,.16)}.nav-shell{height:100%;display:flex;align-items:center;justify-content:space-between}.logo{width:225px;height:66px;display:flex;align-items:center}.logo img{content:url('../img/logo-art-du-fer-modern.svg');object-fit:contain;object-position:left center}.nav-links{display:flex;align-items:center;gap:23px;color:#fff;font-size:.65rem;text-transform:none;letter-spacing:.04em;font-weight:800}.nav-links>a:not(.nav-contact){position:relative;opacity:.9}.nav-links>a:not(.nav-contact):after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:1px;background:var(--gold);transition:.25s}.nav-links>a:hover:after,.nav-links>a.active:after{right:0}.nav-contact{background:var(--gold);padding:13px 15px;color:#131b20;font-weight:800}.menu-button{display:none;border:0;background:transparent;width:42px;padding:7px}.menu-button span{display:block;height:2px;background:#fff;margin:6px 0}

/* Hero */
.page-hero{min-height:92vh;position:relative;background-image:var(--hero);background-size:cover;background-position:center;display:flex;align-items:flex-end;color:#fff}.page-hero.compact{min-height:72vh}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,15,18,.92) 0%,rgba(9,15,18,.67) 42%,rgba(9,15,18,.1) 78%),linear-gradient(0deg,rgba(8,13,16,.7),transparent 56%)}.hero-content{position:relative;padding:170px 0 100px;max-width:850px;margin-left:max(24px,calc((100vw - 1180px)/2))}.page-hero h1{font-size:clamp(3.6rem,7vw,7.4rem);line-height:.91;margin:12px 0 27px;color:#fff}.page-hero.compact h1{font-size:clamp(3.2rem,6vw,6.2rem)}.hero-lead{max-width:650px;color:rgba(255,255,255,.82);font-size:1.05rem}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:33px}

/* Shared */
.trust-strip{position:relative;background:var(--ink);color:#fff}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}.trust-grid>div{padding:28px 24px;border-right:1px solid rgba(255,255,255,.13)}.trust-grid>div:last-child{border:0}.trust-grid b{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:var(--gold2);margin-bottom:6px}.trust-grid span{font-size:.76rem;color:rgba(255,255,255,.65)}
.reviews-banner{position:relative;overflow:hidden;padding:86px 0 78px;background:linear-gradient(135deg,#f0ece5 0%,#faf8f4 58%,#eee7dd 100%);border-bottom:1px solid var(--line)}
.reviews-banner:before{content:"“";position:absolute;top:-105px;right:3vw;color:rgba(197,154,85,.1);font-family:var(--serif);font-size:27rem;line-height:1;pointer-events:none}
.reviews-heading{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:end;gap:45px;margin-bottom:34px}.reviews-heading h2{max-width:740px;font-size:clamp(2.35rem,4.6vw,4.6rem);margin-bottom:0}.reviews-score{min-width:205px;padding-left:24px;border-left:1px solid rgba(19,27,32,.18)}.reviews-stars{display:block;color:var(--gold);font-size:1.53rem;line-height:1;letter-spacing:.12em}.reviews-score strong,.reviews-score small{display:block}.reviews-score strong{margin:7px 0 1px;color:var(--ink);font-family:var(--serif);font-size:1.75rem;font-weight:400}.reviews-score small{color:var(--muted);font-size:.72rem;letter-spacing:.04em}
.reviews-marquee{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;padding:8px 0 14px;cursor:grab;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}.reviews-marquee::-webkit-scrollbar{display:none}.reviews-marquee.dragging{cursor:grabbing;user-select:none}.reviews-track{display:flex;width:max-content}.reviews-set{display:flex;align-items:stretch;gap:16px;padding-right:16px}.review-card{width:min(430px,78vw);min-height:278px;padding:28px 30px 25px;background:rgba(255,255,255,.88);border:1px solid rgba(19,27,32,.1);border-radius:18px;box-shadow:0 18px 48px rgba(19,27,32,.08);display:flex;flex-direction:column;justify-content:space-between;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}.review-card:hover{transform:translateY(-4px);border-color:rgba(197,154,85,.55);box-shadow:0 24px 58px rgba(19,27,32,.12)}.review-card-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.review-card-top span{color:var(--gold);font-size:1.37rem;line-height:1;letter-spacing:.11em}.review-card-top b{color:var(--muted);font-size:.68rem;letter-spacing:.08em}.review-card blockquote{margin:20px 0 24px;color:var(--ink);font-family:var(--serif);font-size:1.16rem;line-height:1.45}.review-card-rating p{margin:20px 0 24px;color:var(--ink);font-family:var(--serif);font-size:1.55rem}.review-card footer{display:flex;align-items:center;gap:12px}.review-avatar{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border-radius:50%;background:var(--ink);color:var(--gold2);font-size:.64rem;font-weight:800}.review-card footer strong,.review-card footer small{display:block}.review-card footer strong{color:var(--ink);font-size:.72rem}.review-card footer small{color:var(--muted);font-size:.65rem}.reviews-link-row{display:flex;justify-content:flex-end}.reviews-link-row .text-link{margin-top:14px}
@keyframes reviews-flow{to{transform:translate3d(-50%,0,0)}}
.intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:start}.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:45px}.section-heading>p{max-width:430px;color:var(--muted)}.section-heading h2{margin-bottom:0}
.services-section{background:var(--stone)}.service-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.service-card{position:relative;min-height:480px;overflow:hidden;color:#fff;isolation:isolate}.service-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,13,16,.92),rgba(8,13,16,.03) 70%);z-index:1}.service-card img{transform:scale(1.08);transition:transform .65s ease}.service-card:hover img{transform:scale(1)}.service-card>div{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:32px}.service-card small{color:var(--gold2);letter-spacing:.15em}.service-card h3{font-size:2.1rem;margin:6px 0}.service-card p{max-width:480px;color:rgba(255,255,255,.72);font-size:.84rem}.service-card span{text-transform:uppercase;letter-spacing:.09em;font-size:.68rem;font-weight:800}
.feature-split{display:grid;grid-template-columns:1.15fr .85fr;min-height:650px}.feature-image{min-height:580px}.feature-copy{padding:80px max(45px,calc((100vw - 1180px)/2)) 80px 70px;display:flex;flex-direction:column;justify-content:center}.feature-copy h2{font-size:clamp(2.6rem,4vw,4.5rem)}.feature-copy p{color:rgba(255,255,255,.68)}.feature-split:not(.dark) .feature-copy p{color:var(--muted)}.check-list{list-style:none;padding:0;margin:20px 0 30px}.check-list li{position:relative;padding:8px 0 8px 25px;border-bottom:1px solid rgba(255,255,255,.13);font-size:.85rem}.check-list li:before{content:"✓";position:absolute;left:0;color:var(--gold2)}.dark-list li{border-color:var(--line)}.dark-list li:before{color:var(--gold)}
.number-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.number-card{padding:32px 25px;border-right:1px solid var(--line)}.number-card:last-child{border:0}.number-card>span{font-family:var(--serif);font-size:2.2rem;color:var(--gold)}.number-card h3{margin:18px 0 8px}.number-card p{font-size:.82rem;color:var(--muted)}.light-cards{border-color:rgba(255,255,255,.16)}.light-cards .number-card{border-color:rgba(255,255,255,.16)}.light-cards .number-card p{color:rgba(255,255,255,.64)}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.article-card{background:#fff;border:1px solid var(--line);transition:.25s;overflow:hidden}.article-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.article-card img{height:240px}.article-card>div{padding:24px}.article-card small{color:var(--gold);text-transform:uppercase;letter-spacing:.12em;font-size:.61rem}.article-card h3{margin:10px 0 12px}.article-card p{color:var(--muted);font-size:.8rem}.article-card span{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.cta-band{background:var(--ink);color:#fff;padding:75px 0}.cta-inner{display:flex;justify-content:space-between;gap:22px;align-items:center;flex-wrap:wrap}.cta-inner>div:first-child{flex:1 1 420px}.cta-inner .button{flex:0 0 auto}.cta-inner h2{font-size:clamp(2rem,3.5vw,3.8rem);margin-bottom:12px}.cta-inner p{color:rgba(255,255,255,.62);margin-bottom:0}
.tech-band{background:linear-gradient(180deg,#f7f3ec 0%,#efe8de 100%);padding:36px 0 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tech-band .shell{display:block}
.tech-band-intro{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:16px}
.tech-band-intro p{margin:0;color:var(--muted);max-width:560px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stats-grid>div{padding:22px 22px 20px;border:1px solid rgba(19,27,32,.08);border-radius:20px;background:rgba(255,255,255,.86);box-shadow:0 16px 34px rgba(19,27,32,.08);min-height:126px;display:flex;flex-direction:column;justify-content:flex-end}
.stats-grid strong{display:block;font-family:var(--serif);font-size:1.7rem;line-height:1.04;color:var(--ink);margin-bottom:10px}.stats-grid span{font-size:.76rem;line-height:1.48;color:#5f6669}
.split-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:600px}.split-section>.split-copy{padding:70px max(40px,calc((100vw - 1180px)/2)) 70px 70px}.split-section>.split-image{height:600px}.split-section.reverse-layout .split-copy{order:2;padding-left:70px;padding-right:max(40px,calc((100vw - 1180px)/2))}.split-section.reverse-layout .split-image{order:1}.mini-specs{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.mini-specs span{border:1px solid var(--line);padding:8px 11px;font-size:.7rem}
.icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.icon-card{background:#fff;padding:30px;border:1px solid var(--line);min-height:235px}.icon-card>span{font-family:var(--serif);font-size:2.5rem;color:var(--gold)}.icon-card h3{margin:18px 0 9px}.icon-card p{font-size:.8rem;color:var(--muted)}.dark-icons .icon-card{background:#202a30;border-color:rgba(255,255,255,.12)}.dark-icons .icon-card p{color:rgba(255,255,255,.6)}
.three-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.three-gallery figure{margin:0;background:#fff;border:1px solid var(--line)}.three-gallery img{height:370px}.three-gallery figcaption{padding:18px;color:var(--muted);font-size:.78rem}.product-gallery figcaption b{color:var(--ink);font-family:var(--serif);font-size:1.15rem}
.faq-section h2{font-size:clamp(2.2rem,3.8vw,3.7rem)}.faq details{border-top:1px solid var(--line);padding:20px 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{list-style:none;cursor:pointer;font-family:var(--serif);font-size:1.25rem}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";float:right;color:var(--gold)}.faq details[open] summary:after{content:"−"}.faq details p{color:var(--muted);max-width:720px}
.story-steps{display:flex;flex-direction:column;gap:55px}.story-row{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;background:#fff}.story-row>div{padding:55px}.story-row img{height:500px}.story-row.reverse>div{order:2}.story-row.reverse img{order:1}
/* Barre de filtres — trois familles dépliables */
.filter-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:45px;align-items:start}
.filter-all{grid-column:1/-1}

.filter-group{position:relative}
.filter-group-toggle{
  display:flex;align-items:center;gap:15px;width:100%;padding:22px 24px;text-align:left;
  background:var(--ink);border:1px solid var(--ink);border-radius:13px;color:#fff;cursor:pointer;
  text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;font-weight:800;font-family:inherit;
  box-shadow:0 10px 26px rgba(17,24,28,.14);
  transition:background .25s ease,box-shadow .25s ease,transform .25s ease;
}
.filter-group-toggle .filter-icon{flex:0 0 24px;width:24px;height:24px;color:var(--gold2)}
.filter-group-toggle .filter-label{flex:1}
.filter-group-toggle .filter-count{
  padding:4px 10px;border-radius:999px;background:rgba(224,189,125,.16);
  color:var(--gold2);font-size:.68rem;letter-spacing:.04em;
}
.filter-group-toggle .filter-chevron{
  flex:0 0 10px;width:10px;height:10px;border-right:2px solid var(--gold2);border-bottom:2px solid var(--gold2);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s ease;
}
.filter-group-toggle:hover{background:#1c262c;transform:translateY(-2px);box-shadow:0 16px 34px rgba(17,24,28,.2)}
.filter-group.open>.filter-group-toggle{border-radius:13px 13px 0 0;background:#1c262c}
.filter-group.open>.filter-group-toggle .filter-chevron{transform:rotate(-135deg) translate(-3px,-3px)}

.filter-group-panel{
  display:grid;gap:6px;overflow:hidden;max-height:0;
  padding:0 10px;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 13px 13px;
  opacity:0;transition:max-height .34s cubic-bezier(.22,.61,.36,1),opacity .24s ease,padding .34s ease;
}
.filter-group.open>.filter-group-panel{max-height:520px;opacity:1;padding:10px}

.filter-count{
  margin-left:auto;flex:0 0 auto;padding:3px 9px;border-radius:999px;
  background:rgba(19,27,32,.06);color:var(--muted);font-size:.64rem;font-weight:800;letter-spacing:.04em;
}
.filter.active .filter-count{background:rgba(224,189,125,.2);color:var(--gold2)}
.filter{
  display:flex;align-items:center;gap:16px;width:100%;padding:19px 22px;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--ink);cursor:pointer;
  text-transform:uppercase;letter-spacing:.09em;font-size:.7rem;font-weight:800;font-family:inherit;
  box-shadow:0 6px 18px rgba(17,24,28,.05);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.filter .filter-icon{flex:0 0 26px;width:26px;height:26px;color:var(--gold);transition:color .25s ease}
.filter .filter-label{position:relative;padding-bottom:4px}
.filter .filter-label:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold2);transition:width .28s ease}
.filter .filter-arrow{margin-left:auto;flex:0 0 auto;color:var(--gold);font-size:1rem;line-height:1;transition:transform .25s ease,color .25s ease}
.filter:hover{transform:translateY(-3px);border-color:rgba(197,154,85,.5);box-shadow:0 14px 32px rgba(17,24,28,.1)}
.filter:hover .filter-arrow{transform:translateX(4px)}
.filter.active{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 16px 38px rgba(17,24,28,.22)}
.filter.active .filter-icon,.filter.active .filter-arrow{color:var(--gold2)}
.filter.active .filter-label:after{width:100%}
.filter-all{grid-column:1/-1}
@media(max-width:980px){.filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .filter-bar{grid-template-columns:1fr;gap:10px}
  .filter{padding:16px 18px;font-size:.66rem;gap:13px}
  .filter .filter-icon{flex-basis:22px;width:22px;height:22px}
}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.project-card{background:#fff;border:1px solid var(--line);transition:.25s}.project-card.hidden-card{display:none}.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.project-card>div{padding:23px}.project-card small{color:var(--gold);text-transform:uppercase;letter-spacing:.12em}.project-card h3{margin:8px 0}.project-card p{font-size:.8rem;color:var(--muted)}.project-card a{font-size:.69rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.article-catalogue{grid-template-columns:repeat(3,1fr)}.article-card.large img{height:280px}.upcoming{margin-top:15px;background:var(--ink);color:#fff;padding:30px;display:flex;align-items:center;justify-content:space-between;gap:30px}.upcoming span{color:var(--gold2);text-transform:uppercase;letter-spacing:.13em;font-size:.63rem}.upcoming h3{margin:7px 0}.upcoming p{color:rgba(255,255,255,.62);margin:0}

/* Contact */
.contact-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:75px}.contact-side{position:sticky;top:105px;align-self:start}.contact-box{background:var(--ink);color:#fff;padding:25px;margin:28px 0}.contact-box b,.contact-box span{display:block;margin:6px 0}.multi-form{background:#fff;padding:36px;border:1px solid var(--line);box-shadow:var(--shadow)}.form-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:35px}.form-progress span{height:4px;background:#ddd;font-size:0}.form-progress span.active{background:var(--gold)}.form-step{display:none}.form-step.active{display:block}.form-step h3{font-size:2.1rem}.select-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.select-cards input{display:none}.select-cards span{display:block;border:1px solid var(--line);padding:22px;cursor:pointer}.select-cards input:checked+span{border-color:var(--gold);background:#f6eee1}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea{display:block;width:100%;margin-top:7px;border:1px solid #d7d2ca;background:#fbfaf8;padding:13px;min-height:48px}.form-grid textarea{min-height:130px;resize:vertical}.form-grid select[multiple]{min-height:110px}.field-label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.checkbox-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}.checkbox-group label{display:inline-flex;margin:0}.checkbox-group input{display:none}.checkbox-group span{display:block;padding:11px 16px;border:1px solid #d7d2ca;background:#fbfaf8;font-size:.72rem;text-transform:none;letter-spacing:0;font-weight:400;cursor:pointer;transition:.2s}.checkbox-group input:checked+span{border-color:var(--gold);background:#f6eee1;font-weight:700}.upload{border:1px dashed #aaa;padding:18px}.upload input{border:0;padding:0;min-height:auto}.upload span{display:block;color:var(--muted);margin-top:6px;text-transform:none;font-weight:400}.consent{display:flex;gap:10px;align-items:center;text-transform:none!important;font-weight:400!important}.consent input{width:auto;margin:0;min-height:auto}.form-actions{display:flex;justify-content:space-between;gap:12px;margin-top:30px}.form-success{background:#e9f0e7;padding:25px;margin-top:25px}.form-success h3{margin-bottom:8px}
.legal-page{padding-top:180px;min-height:70vh}.legal-page h1{font-size:4rem}

/* Footer */
.site-footer{background:#0f161a;color:#fff;padding:70px 0 0}.footer-grid{display:grid;grid-template-columns:1.3fr .8fr .95fr .85fr .9fr;gap:40px}.footer-logo{content:url('../img/logo-art-du-fer-modern.svg');width:260px;height:90px;object-fit:contain;object-position:left}.site-footer p,.site-footer a{display:block;color:rgba(255,255,255,.6);font-size:.78rem;margin:8px 0}.site-footer .footer-heading{text-transform:uppercase;letter-spacing:.12em;color:var(--gold2);font-size:.7rem;font-weight:800;margin:8px 0}.footer-signature{font-family:var(--serif);font-style:italic;color:var(--gold2)!important}.footer-bottom{margin-top:55px;border-top:1px solid rgba(255,255,255,.12);padding:18px 0;display:flex;justify-content:space-between;color:rgba(255,255,255,.43);font-size:.68rem}.footer-bottom a{display:inline}

/* Animation — apparition anticipée et légère pour préserver la fluidité */
.reveal{opacity:0;transform:translate3d(0,14px,0);transition:opacity .44s cubic-bezier(.22,.61,.36,1),transform .44s cubic-bezier(.22,.61,.36,1)}.reveal.visible{opacity:1;transform:translate3d(0,0,0)}

.logo img,.footer-logo{content:normal}
@supports (content-visibility:auto){
  .section,.feature-split,.cta-band,.site-footer{content-visibility:auto;contain-intrinsic-size:auto 700px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .reviews-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x proximity}
  .reviews-track{animation:none;transform:none;will-change:auto}
  .reviews-set[aria-hidden="true"]{display:none}
  .review-card{scroll-snap-align:center}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media(max-width:1050px){
  .nav-links{gap:13px;font-size:.58rem}.logo{width:190px}
  .trust-grid,.stats-grid,.number-grid,.icon-grid{grid-template-columns:1fr 1fr}
  .trust-grid>div:nth-child(2),.stats-grid>div:nth-child(2){border-right:0}
  .service-card{min-height:400px}.project-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:800px){
  .shell{width:min(100% - 32px,1180px)}.section{padding:78px 0}
  .site-header{height:72px;background:rgba(15,22,26,.95)}.logo{width:188px;height:58px}.menu-button{display:block}
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:#11191e;padding:25px 24px;flex-direction:column;align-items:stretch;gap:0}.nav-links.open{display:flex}.nav-links a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}.nav-contact{text-align:center;margin-top:12px}
  .page-hero,.page-hero.compact{min-height:78vh;background-position:62% center}.hero-content{padding:130px 16px 70px;margin:0}.page-hero h1,.page-hero.compact h1{font-size:clamp(3rem,14vw,5rem)}.hero-shade{background:linear-gradient(0deg,rgba(8,13,16,.9),rgba(8,13,16,.32))}
  .trust-grid,.stats-grid,.intro-grid,.feature-split,.split-section,.story-row,.contact-layout{grid-template-columns:1fr}.trust-grid>div,.stats-grid>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .intro-grid{gap:25px}.section-heading{display:block}.section-heading>p{margin-top:20px}.service-cards,.article-grid,.article-catalogue{grid-template-columns:1fr}.service-card{min-height:420px}
  .feature-split{min-height:auto}.feature-image,.split-section>.split-image{height:420px;min-height:0}.feature-copy,.split-section>.split-copy,.split-section.reverse-layout .split-copy{padding:60px 24px}.split-section.reverse-layout .split-copy{order:1}.split-section.reverse-layout .split-image{order:2}
  .number-grid,.icon-grid{grid-template-columns:1fr}.number-card,.icon-card{border-right:0;border-bottom:1px solid var(--line)}
  .three-gallery,.project-grid{grid-template-columns:1fr}.three-gallery img{height:300px}
  .story-row>div{padding:35px}.story-row img{height:340px}.story-row.reverse>div{order:1}.story-row.reverse img{order:2}
  .cta-inner,.upcoming{display:block}.cta-inner .button,.upcoming .button{margin-top:25px}.contact-side{position:static}.form-grid,.select-cards{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin:7px 0}
  .reviews-banner{padding:66px 0 58px}.reviews-heading{display:block;margin-bottom:26px}.reviews-heading h2{font-size:clamp(2.3rem,11vw,3.6rem)}.reviews-score{margin-top:25px;padding:18px 0 0;border-left:0;border-top:1px solid rgba(19,27,32,.16)}.reviews-marquee{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}.review-card{width:82vw;min-height:270px;padding:25px 24px}.review-card blockquote{font-size:1.08rem}.reviews-link-row{justify-content:flex-start}.reviews-track{animation-duration:85s}
}
@media(max-width:520px){
  .trust-grid,.stats-grid,.footer-grid{grid-template-columns:1fr}.hero-actions .button{width:100%}.multi-form{padding:24px 18px}.form-actions{flex-wrap:wrap}.form-actions .button{flex:1}.tech-band{padding:28px 0 22px}.tech-band-intro{display:block}.tech-band-intro p{margin-top:10px}
}


/* V2 — dropdown navigation and historic metal categories */
.nav-dropdown{position:relative;height:100%;display:flex;align-items:center}
.nav-drop-toggle{display:flex;align-items:center;gap:7px;min-height:42px;border:0;background:transparent;color:#fff;text-transform:none;letter-spacing:.04em;font-weight:800;font-size:.65rem;padding:0;opacity:.92;position:relative;transition:color .2s ease,opacity .2s ease}
.nav-drop-toggle span{display:inline-grid;width:18px;height:18px;place-items:center;border:1px solid rgba(224,189,125,.34);border-radius:50%;color:var(--gold2);font-size:.7rem;line-height:1;transition:transform .24s ease,background .24s ease,border-color .24s ease}
.nav-drop-toggle:after{content:"";position:absolute;left:0;right:100%;bottom:-10px;height:1px;background:var(--gold);transition:.25s}
.nav-drop-toggle:hover:after,.nav-drop-toggle.active:after{right:0}
.nav-submenu{position:absolute;top:calc(100% - 4px);left:-20px;min-width:245px;background:#11191e;border:1px solid rgba(224,189,125,.22);border-top:2px solid var(--gold);border-radius:0 0 16px 16px;padding:10px;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,10px,0) scale(.985);transform-origin:top left;transition:opacity .2s ease,transform .24s cubic-bezier(.22,.61,.36,1),visibility 0s linear .24s;box-shadow:0 24px 65px rgba(0,0,0,.34)}
.nav-dropdown:hover>.nav-submenu,.nav-dropdown:focus-within>.nav-submenu,.nav-dropdown.open>.nav-submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0) scale(1);transition-delay:0s}
.nav-dropdown:hover>.nav-drop-toggle,.nav-dropdown:focus-within>.nav-drop-toggle,.nav-dropdown.open>.nav-drop-toggle{color:var(--gold2);opacity:1}
.nav-dropdown:hover>.nav-drop-toggle span,.nav-dropdown:focus-within>.nav-drop-toggle span,.nav-dropdown.open>.nav-drop-toggle span{transform:rotate(180deg);background:rgba(197,154,85,.14);border-color:rgba(224,189,125,.65)}
.nav-submenu a{display:block;position:relative;color:rgba(255,255,255,.76);margin:2px 0;padding:11px 13px 11px 16px;border:0!important;border-radius:9px;font-size:.66rem;text-transform:none;letter-spacing:.02em;transition:color .18s ease,background .18s ease,transform .18s ease}
.nav-submenu a:before{content:"";position:absolute;left:7px;top:50%;width:2px;height:0;border-radius:2px;background:var(--gold);transform:translateY(-50%);transition:height .18s ease}
.nav-submenu a:hover,.nav-submenu a:focus-visible{color:#fff;background:rgba(255,255,255,.065);transform:translateX(3px);outline:none}.nav-submenu a:hover:before,.nav-submenu a:focus-visible:before{height:18px}

/* Navigation portails — deux niveaux */
.nav-submenu-portails{min-width:270px}
.nav-subgroup{position:relative;margin:2px 0}
.nav-subgroup-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;border:0;border-radius:9px;background:transparent;color:#fff;padding:12px 13px;font:inherit;font-size:.69rem;font-weight:700;text-align:left;cursor:pointer;transition:color .18s ease,background .18s ease}
.nav-subgroup-toggle span{color:var(--gold2);font-size:1rem;transition:transform .2s ease}
.nav-subgroup:hover>.nav-subgroup-toggle,.nav-subgroup:focus-within>.nav-subgroup-toggle,.nav-subgroup.open>.nav-subgroup-toggle{color:var(--gold2);background:rgba(255,255,255,.065)}
.nav-submenu-level2{position:absolute;top:-10px;left:calc(100% + 8px);min-width:220px;padding:10px;background:#11191e;border:1px solid rgba(224,189,125,.22);border-top:2px solid var(--gold);border-radius:0 0 14px 14px;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(8px,0,0) scale(.985);transform-origin:top left;transition:opacity .2s ease,transform .22s cubic-bezier(.22,.61,.36,1),visibility 0s linear .22s;box-shadow:0 22px 58px rgba(0,0,0,.32)}
.nav-subgroup:hover>.nav-submenu-level2,.nav-subgroup:focus-within>.nav-submenu-level2,.nav-subgroup.open>.nav-submenu-level2{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0) scale(1);transition-delay:0s}
.nav-submenu-level2 a{white-space:nowrap}
.portal-material-grid article{scroll-margin-top:100px}

.metal-access-section{background:#fff}
.legacy-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.legacy-card{position:relative;background:var(--ink);color:#fff;min-height:500px;overflow:hidden;isolation:isolate}
.legacy-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,12,15,.94),rgba(7,12,15,.03) 72%);z-index:1}
.legacy-card img{position:absolute;inset:0;transform:scale(1.12);transition:transform .65s ease}
.legacy-card:hover img{transform:scale(1)}
.legacy-card>div{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:29px}
.legacy-card small{color:var(--gold2);text-transform:uppercase;letter-spacing:.15em;font-size:.62rem}
.legacy-card h3{font-size:2rem;margin:8px 0 10px}
.legacy-card p{font-size:.8rem;color:rgba(255,255,255,.7)}
.legacy-card span{font-size:.67rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.metallerie-grid .legacy-card{min-height:560px}

/* Métallerie — cinq sous-catégories */
.nav-submenu-metal{min-width:250px}
.metallerie-category-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.metal-category-card{position:relative;grid-column:span 4;aspect-ratio:4/3;overflow:hidden;isolation:isolate;background:var(--ink2);color:#fff;border:1px solid rgba(19,27,32,.08);box-shadow:0 14px 38px rgba(17,24,28,.08);scroll-margin-top:100px;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.metal-category-card.metal-category-wide{grid-column:span 6}
.metal-category-card:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(7,12,15,.94) 0%,rgba(7,12,15,.42) 35%,rgba(7,12,15,0) 68%);pointer-events:none}
.metal-category-card:before{content:"";position:absolute;inset:10px;z-index:3;border:1px solid transparent;pointer-events:none;transition:border-color .35s ease}
.metal-category-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:var(--ink2);filter:brightness(.93) saturate(.92);transition:filter .45s ease}
.metal-category-card>div{position:absolute;inset:auto 0 0;z-index:2;padding:28px;transform:translateY(4px);transition:transform .35s ease}
.metal-category-card small{display:block;color:var(--gold2);text-transform:uppercase;letter-spacing:.15em;font-size:.58rem}
.metal-category-card h3{margin:7px 0 8px;color:#fff;font-size:clamp(1.8rem,2.8vw,2.5rem)}
.metal-category-card p{max-width:500px;margin:0;color:rgba(255,255,255,.72);font-size:.8rem}
.metal-category-card:hover{transform:translateY(-5px);border-color:rgba(197,154,85,.42);box-shadow:0 24px 58px rgba(17,24,28,.17)}
.metal-category-card:hover:before{border-color:rgba(224,189,125,.55)}
.metal-category-card:hover img{filter:brightness(1.02) saturate(1.06)}
.metal-category-card:hover>div{transform:none}
.metal-category-card.metal-category-link{display:block;text-decoration:none}
.metal-category-card.metal-category-link span{display:inline-block;margin-top:12px;color:var(--gold2);font-size:.63rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* Page brasero */
.brasero-price{display:inline-flex;align-items:baseline;gap:8px;margin:18px 0 4px;padding:13px 18px;border-left:3px solid var(--gold);background:rgba(255,255,255,.08);color:#fff}
.brasero-price strong{font-family:var(--display);font-size:clamp(2rem,4vw,3.4rem);line-height:1;color:var(--gold2)}
.brasero-price span{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.brasero-product-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:clamp(30px,6vw,82px);align-items:center}
.brasero-product-grid img{width:100%;max-height:720px;object-fit:contain;background:var(--ink2);box-shadow:0 26px 70px rgba(17,24,28,.16)}
.brasero-details{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:28px 0}
.brasero-details div{padding:18px;border:1px solid rgba(19,27,32,.1);background:#fff}
.brasero-details b{display:block;margin-bottom:4px;color:var(--ink);font-size:.82rem}
.brasero-details span{color:var(--muted);font-size:.72rem}
.brasero-note{padding:17px 19px;border-left:3px solid var(--gold);background:var(--stone);font-size:.75rem;color:var(--muted)}
@media(max-width:800px){.brasero-product-grid{grid-template-columns:1fr}.brasero-details{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.brasero-details{grid-template-columns:1fr}}

@media(max-width:1100px){
  .nav-drop-toggle{font-size:.58rem}.nav-submenu{left:-10px}
}
@media(max-width:800px){
  .nav-dropdown{display:block;height:auto;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-drop-toggle{width:100%;text-align:left;padding:14px 0;font-size:.65rem}
  .nav-drop-toggle span{margin-left:auto}
  .nav-drop-toggle:after{display:none}
  .nav-submenu{display:none;position:static;min-width:0;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:rgba(255,255,255,.035);padding:4px 10px 8px}
  .nav-dropdown.open .nav-submenu{display:block}
  .nav-dropdown:hover .nav-submenu{transform:none}
  .nav-submenu a{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.07)!important}
  .nav-submenu-portails{min-width:0}
  .nav-subgroup{border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-subgroup-toggle{padding:11px 8px;font-size:.66rem}
  .nav-subgroup-toggle span{transform:rotate(90deg)}
  .nav-submenu-level2{display:none;position:static;min-width:0;margin:0 0 5px 10px;padding:0 8px;border:0;border-left:1px solid rgba(197,154,85,.55);background:rgba(0,0,0,.12);opacity:1;visibility:visible;transform:none;box-shadow:none}
  .nav-subgroup.open>.nav-submenu-level2{display:block}
  .nav-subgroup.open>.nav-subgroup-toggle span{transform:rotate(-90deg)}
  .nav-submenu-level2 a{padding:9px 8px;font-size:.62rem}
  .legacy-cards{grid-template-columns:1fr}.legacy-card{min-height:430px}.metallerie-grid .legacy-card{min-height:450px}
  .nav-submenu-metal{min-width:0}
  .metallerie-category-grid{grid-template-columns:1fr}
  .metal-category-card,.metal-category-card.metal-category-wide{grid-column:auto;aspect-ratio:4/3}
  .metal-category-card>div{padding:22px}
  .metal-category-card h3{font-size:clamp(1.65rem,8vw,2.2rem)}
}

/* V3 homepage taxonomy */
.nav-submenu-wide{min-width:310px}.nav-submenu a b{display:block;font-size:.69rem;color:#fff}.nav-submenu a small{display:block;margin-top:3px;color:rgba(255,255,255,.5);font-size:.58rem;text-transform:none;letter-spacing:0}
.v3-categories{background:var(--stone)}.primary-category-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.category-v3{position:relative;grid-column:span 4;min-height:440px;overflow:hidden;color:#fff;isolation:isolate}.category-v3:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,13,16,.94),rgba(8,13,16,.03) 72%);z-index:1}.category-v3 img{transform:scale(1.12);transition:transform .7s ease}.category-v3:hover img{transform:scale(1)}.category-v3>div{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:30px}.category-v3 small{color:var(--gold2);text-transform:uppercase;letter-spacing:.14em;font-size:.62rem}.category-v3 h3{font-size:2rem;margin:7px 0 9px}.category-v3.category-wide h3,.category-v3.category-side h3{font-size:2rem}.category-v3 p{max-width:530px;color:rgba(255,255,255,.72);font-size:.82rem}.category-v3 span{font-size:.67rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800}.category-v3[href="fermetures.html"] img{object-position:center}
@media(max-width:980px){.category-v3,.category-v3.category-wide,.category-v3.category-side,.category-v3:last-child{grid-column:span 6;min-height:430px}}
@media(max-width:800px){.primary-category-grid{grid-template-columns:1fr}.category-v3,.category-v3.category-wide,.category-v3.category-side,.category-v3:last-child{grid-column:auto;min-height:430px}.nav-submenu-wide{min-width:0}}

/* V3.3.4 — cartes catégories sans recadrage des photos */
.category-v3,
.category-v3.category-wide,
.category-v3.category-side{
  min-height:0;
  aspect-ratio:4/3;
}
.category-v3 img{
  object-fit:contain;
  object-position:center;
  transform:none;
  background:var(--ink2);
  transition:filter .35s ease;
}
.category-v3:hover img{
  transform:none;
  filter:brightness(1.06);
}
.category-v3[href="fermetures.html"] img{
  object-position:center;
}
@media(max-width:980px){
  .category-v3,
  .category-v3.category-wide,
  .category-v3.category-side,
  .category-v3:last-child{
    min-height:0;
    aspect-ratio:4/3;
  }
}

@media(max-width:800px){
  .category-v3,
  .category-v3.category-wide,
  .category-v3.category-side,
  .category-v3:last-child{
    min-height:0;
    aspect-ratio:4/3;
  }
}


/* V3.3.3 — photos d'ouverture entièrement visibles */
.page-hero.homepage-hero{
  background-image:none;
  background-color:var(--ink);
  overflow:hidden;
}
.page-hero.homepage-hero .hero-media{
  position:absolute;
  inset:0 0 0 auto;
  z-index:0;
  width:76%;
  height:100%;
  object-fit:contain;
  object-position:right center;
  background:var(--ink);
}
.page-hero.homepage-hero .hero-shade{
  z-index:1;
  background:
    linear-gradient(90deg,#0b1216 0%,rgba(11,18,22,.97) 28%,rgba(11,18,22,.72) 48%,rgba(11,18,22,.08) 76%),
    linear-gradient(0deg,rgba(8,13,16,.48),transparent 52%);
}
.page-hero.homepage-hero .hero-content{
  z-index:2;
  max-width:760px;
}

.page-hero.category-hero{
  background-image:none;
  background-color:var(--ink);
  overflow:hidden;
}
.page-hero.category-hero .hero-media{
  position:absolute;
  inset:0 0 0 auto;
  z-index:0;
  width:66%;
  height:100%;
  object-fit:contain;
  object-position:right center;
  background:var(--ink2);
}
.page-hero.category-hero .hero-shade{
  z-index:1;
  background:
    linear-gradient(90deg,#0b1216 0%,rgba(11,18,22,.97) 32%,rgba(11,18,22,.68) 50%,rgba(11,18,22,.06) 78%),
    linear-gradient(0deg,rgba(8,13,16,.42),transparent 52%);
}
.page-hero.category-hero .hero-content{
  z-index:2;
  max-width:720px;
}
.page-hero.category-hero.pergola-toile-hero .hero-media{
  width:72%;
  object-position:right center;
}
.alutoile-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.alutoile-gallery figure{
  margin:0;
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden;
}
.alutoile-gallery img{
  height:auto;
  aspect-ratio:4/3;
  object-fit:contain;
  background:var(--ink2);
}
.alutoile-gallery figcaption{
  padding:24px 26px 25px;
}
.alutoile-gallery figcaption b,
.alutoile-gallery figcaption span{
  display:block;
}
.alutoile-gallery figcaption b{
  margin-bottom:7px;
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.45rem;
  font-weight:400;
}
.alutoile-gallery figcaption span{
  color:var(--muted);
  font-size:.8rem;
}
@media(max-width:800px){
  .page-hero.homepage-hero,
  .page-hero.category-hero{
    display:block;
    min-height:0;
    padding-top:72px;
  }
  .page-hero.homepage-hero .hero-media,
  .page-hero.category-hero .hero-media{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center;
  }
  .page-hero.homepage-hero .hero-shade,
  .page-hero.category-hero .hero-shade{
    display:none;
  }
  .page-hero.homepage-hero .hero-content,
  .page-hero.category-hero .hero-content{
    width:min(100% - 32px,1180px);
    max-width:none;
    margin-inline:auto;
    padding:48px 0 62px;
  }
  .page-hero.category-hero.pergola-toile-hero .hero-media{
    width:100%;
  }
  .alutoile-gallery{
    grid-template-columns:1fr;
  }
}

/* V3.3.5 — langage visuel commun aux deux familles de catégories */
.home-category-card,
.legacy-card.home-category-card{
  position:relative;
  min-height:0;
  aspect-ratio:4/3;
  overflow:hidden;
  isolation:isolate;
  background:var(--ink2);
  border:1px solid rgba(19,27,32,.08);
  box-shadow:0 14px 38px rgba(17,24,28,.08);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.home-category-card:after,
.legacy-card.home-category-card:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(0deg,rgba(7,12,15,.9) 0%,rgba(7,12,15,.44) 30%,rgba(7,12,15,0) 62%);
  pointer-events:none;
}
.home-category-card:before{
  content:"";
  position:absolute;
  inset:10px;
  z-index:3;
  border:1px solid transparent;
  pointer-events:none;
  transition:border-color .35s ease;
}
.home-category-card img,
.legacy-card.home-category-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:var(--ink2);
  transform:none;
  filter:brightness(.92) saturate(.9);
  transition:filter .45s ease;
}
.legacy-card-metal.home-category-card img{
  object-fit:cover;
}
.home-category-card>div,
.legacy-card.home-category-card>div{
  position:absolute;
  inset:auto 0 0;
  z-index:2;
  padding:26px 28px 27px;
  transform:translateY(4px);
  transition:transform .35s ease;
}
.home-category-card small,
.legacy-card.home-category-card small{
  display:block;
  padding-right:48px;
  color:var(--gold2);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.58rem;
  line-height:1.4;
}
.home-category-card h3,
.category-v3.home-category-card h3,
.category-v3.home-category-card.category-wide h3,
.category-v3.home-category-card.category-side h3,
.legacy-card.home-category-card h3{
  margin:7px 52px 0 0;
  color:#fff;
  font-size:clamp(1.75rem,2.8vw,2.45rem);
  line-height:1.04;
}
.home-category-card .card-arrow{
  position:absolute;
  right:28px;
  bottom:28px;
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border:1px solid rgba(255,255,255,.52);
  border-radius:50%;
  color:#fff;
  font-size:1rem;
  line-height:1;
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease;
}
.home-category-card:hover,
.home-category-card:focus-visible{
  transform:translateY(-5px);
  border-color:rgba(197,154,85,.42);
  box-shadow:0 24px 58px rgba(17,24,28,.17);
  outline:none;
}
.home-category-card:hover:before,
.home-category-card:focus-visible:before{
  border-color:rgba(224,189,125,.55);
}
.home-category-card:hover img,
.home-category-card:focus-visible img,
.legacy-card.home-category-card:hover img,
.legacy-card.home-category-card:focus-visible img{
  transform:none;
  filter:brightness(1.02) saturate(1.06);
}
.home-category-card:hover>div,
.home-category-card:focus-visible>div{
  transform:none;
}
.home-category-card:hover .card-arrow,
.home-category-card:focus-visible .card-arrow{
  background:var(--gold);
  border-color:var(--gold);
  transform:translateX(3px);
}
@media(max-width:800px){
  .home-category-card,
  .legacy-card.home-category-card{
    min-height:0;
    aspect-ratio:4/3;
  }
  .home-category-card>div,
  .legacy-card.home-category-card>div{
    padding:22px;
  }
  .home-category-card h3,
  .category-v3.home-category-card h3,
  .category-v3.home-category-card.category-wide h3,
  .category-v3.home-category-card.category-side h3,
  .legacy-card.home-category-card h3{
    font-size:clamp(1.65rem,8vw,2.2rem);
  }
  .home-category-card .card-arrow{
    right:22px;
    bottom:22px;
  }
}

/* Priorité finale pour la navigation sur toutes les pages */
.nav-links{font-family:"Inter","Segoe UI",Arial,sans-serif;font-size:.69rem;font-weight:700;letter-spacing:.025em;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.nav-links>a:not(.nav-contact){opacity:.94}
.nav-drop-toggle{font-family:inherit;font-size:.69rem;font-weight:700;letter-spacing:.025em;opacity:.94;text-transform:capitalize}
.nav-submenu a{font-size:.71rem;line-height:1.35;letter-spacing:.015em;color:rgba(255,255,255,.82)}
.nav-subgroup-toggle{font-size:.73rem;text-transform:capitalize}
.nav-submenu a b{font-size:.73rem;font-weight:700;text-transform:capitalize}
.nav-submenu a small{font-size:.62rem;letter-spacing:.005em;color:rgba(255,255,255,.58)}
@media(max-width:1120px){.nav-links,.nav-drop-toggle{font-size:.62rem}}
@media(max-width:800px){.nav-links,.nav-drop-toggle{font-size:.72rem}.nav-submenu a,.nav-subgroup-toggle{font-size:.7rem}.nav-submenu-level2 a{font-size:.67rem}}

/* Priorité finale — taille des onglets réduite de 20 % après agrandissement */
@media(min-width:1121px){
  .nav-links{gap:14px;font-size:.938rem;letter-spacing:.012em}
  .nav-drop-toggle{font-size:.938rem;letter-spacing:.012em}
  .nav-contact{padding:11px 13px}
  .logo{width:190px}
  .nav-submenu a{font-size:.966rem}
  .nav-subgroup-toggle,.nav-submenu a b{font-size:.993rem}
  .nav-submenu a small{font-size:.843rem}
  .nav-submenu-level2 a{font-size:.938rem}
  .nav-submenu-wide{min-width:390px}
  .nav-submenu-portails{min-width:350px}
  .nav-submenu-metal{min-width:330px}
}
@media(min-width:801px) and (max-width:1120px){
  .nav-links{gap:12px;font-size:.843rem;letter-spacing:.01em}
  .nav-drop-toggle{font-size:.843rem;letter-spacing:.01em}
  .nav-submenu a{font-size:.966rem}
  .nav-subgroup-toggle,.nav-submenu a b{font-size:.993rem}
  .nav-submenu a small{font-size:.843rem}
  .nav-submenu-level2 a{font-size:.911rem}
  .logo{width:175px}
}
@media(max-width:800px){
  .nav-links,.nav-drop-toggle{font-size:.979rem}
  .nav-drop-toggle{padding:18px 0}
  .nav-submenu a,.nav-subgroup-toggle{font-size:.952rem}
  .nav-submenu a b{font-size:.993rem}
  .nav-submenu a small{font-size:.843rem}
  .nav-submenu-level2 a{font-size:.911rem}
}

/* Navigation portrait — panneau lisible, défilable et entièrement accessible */
@media(max-width:800px){
  .site-header,
  .site-header.scrolled{
    height:72px;
  }
  .nav-shell{
    position:relative;
  }
  .menu-button{
    position:relative;
    z-index:3;
    width:50px;
    min-width:50px;
    height:50px;
    padding:8px;
    cursor:pointer;
    touch-action:manipulation;
  }
  .menu-button span{
    width:32px;
    margin:7px auto;
    transform-origin:center;
    transition:transform .22s ease,opacity .18s ease;
  }
  .menu-button[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .menu-button[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-button[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  .nav-links{
    position:fixed;
    z-index:2;
    top:72px;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    max-height:calc(100dvh - 72px);
    padding:12px 22px calc(28px + env(safe-area-inset-bottom));
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:rgba(15,22,26,.99);
    box-shadow:0 24px 55px rgba(0,0,0,.34);
  }
  .nav-links.open{display:flex}
  .nav-links>a:not(.nav-contact),
  .nav-drop-toggle{
    min-height:54px;
    padding:14px 4px;
  }
  .nav-dropdown{
    width:100%;
  }
  .nav-submenu{
    width:100%;
    margin:0 0 8px;
    padding:5px 10px 9px;
    border-left:2px solid rgba(197,154,85,.55);
    border-radius:0 0 10px 0;
  }
  .nav-submenu a,
  .nav-subgroup-toggle{
    min-height:48px;
    padding:12px 10px;
  }
  .nav-submenu-level2{
    width:calc(100% - 12px);
    margin:0 0 7px 12px;
  }
  .nav-contact{
    flex:0 0 auto;
    min-height:52px;
    margin:16px 0 4px;
    display:grid;
    place-items:center;
  }
  body.mobile-menu-open{
    overflow:hidden;
    touch-action:pan-y;
  }
  body.mobile-menu-open .nav-links{touch-action:pan-y}
  body.mobile-menu-open main,
  body.mobile-menu-open footer{pointer-events:none}
}

/* V34.2 — menu mobile portrait corrigé et cache actualisé */

/* V34.3 — navigation portrait verticale et repères de personnalisation affinés */
.pergola-configurator .hotspot-button{
  width:29px;
  height:29px;
  box-shadow:0 0 0 5px rgba(255,255,255,.15),0 7px 16px rgba(0,0,0,.26);
}
.pergola-configurator .hotspot-button span[aria-hidden]{font-size:1rem}
.pergola-configurator .hotspot-fermetures{left:47%;top:52%}
.pergola-configurator .pergola-hotspot:hover .hotspot-button,
.pergola-configurator .pergola-hotspot.open .hotspot-button,
.pergola-configurator .hotspot-button:focus-visible{
  box-shadow:0 0 0 6px rgba(175,132,77,.22),0 8px 18px rgba(0,0,0,.3);
}
.pergola-configurator .hotspot-button-text{
  width:auto;
  height:auto;
  border-radius:999px;
  padding:13px 22px;
  font:800 .66rem/1 Arial;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
}
.finish-row{gap:8px}
.finish-row span{
  padding:8px 14px;
  border:1px solid rgba(19,27,32,.14);
  border-radius:999px;
  background:rgba(19,27,32,.03);
  font-weight:700;
  letter-spacing:.06em;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.finish-row span:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
}

@media(max-width:600px) and (orientation:portrait){
  .nav-links{
    padding-top:8px;
  }
  .nav-links > .nav-dropdown.open:first-child > .nav-submenu{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    max-height:none;
    overflow:visible;
  }
  .nav-links > .nav-dropdown.open:first-child > .nav-submenu > a{
    display:block;
    width:100%;
    min-height:auto;
    padding:10px 10px;
  }
  .nav-links > .nav-dropdown.open:first-child > .nav-submenu > a b,
  .nav-links > .nav-dropdown.open:first-child > .nav-submenu > a small{
    display:block;
  }
  .pergola-configurator .hotspot-button{
    width:25px;
    height:25px;
  }
  .pergola-configurator .hotspot-button span[aria-hidden]{font-size:.9rem}
  .pergola-configurator .hotspot-fermetures{left:45%;top:53%}
}

/* ── Panneaux du configurateur : nuanciers et vignettes ── */
.hotspot-panel{width:290px}
/* ── Configurations d'implantation : schémas 3D ── */
.config-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.config-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#fff;border:1px solid var(--line);padding:18px 20px 22px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.config-card img{
  width:96px;height:96px;object-fit:contain;display:block;margin:0 0 12px;
  mix-blend-mode:multiply;
}
.config-card h3{font-size:1.05rem;margin:0 0 6px;line-height:1.2}
.config-card p{font-size:.8rem;color:var(--muted);margin:0;line-height:1.45}
.config-card:hover{transform:translateY(-4px);border-color:rgba(197,154,85,.45);box-shadow:0 18px 40px rgba(17,24,28,.1)}
@media(max-width:980px){.config-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .config-grid{grid-template-columns:1fr;gap:10px}
  .config-card{flex-direction:row;text-align:left;align-items:center;gap:16px;padding:14px 16px;flex-wrap:wrap}
  .config-card img{width:76px;height:76px;margin:0;flex:0 0 76px}
  .config-card h3{flex:1;margin:0}
  .config-card p{flex:0 0 100%;margin-top:6px;font-size:.88rem}
}

/* ── Carrousel des guides (accueil) ── */
.article-carousel .carousel-set{gap:15px;padding-right:15px}
.article-carousel .article-card{
  flex:0 0 auto;width:min(360px,80vw);display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);overflow:hidden;
}
.article-carousel .article-card img{width:100%;height:210px;object-fit:cover;pointer-events:none}
.article-carousel .article-card>div{padding:22px;display:flex;flex-direction:column;flex:1}
.article-carousel .article-card h3{margin:9px 0 14px;font-size:1.2rem;line-height:1.25;flex:1}
.article-carousel .article-card span{margin-top:auto}
.article-carousel .article-card:hover{transform:none;box-shadow:0 18px 40px rgba(17,24,28,.13)}
@media(max-width:600px){
  .article-carousel .article-card{width:min(290px,84vw)}
  .article-carousel .article-card img{height:170px}
}

/* ── Rappels « voir nos réalisations » au fil de la page ── */
.mid-cta{background:var(--stone);padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mid-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.mid-cta-inner p{margin:0;font-family:var(--serif);font-size:1.3rem;color:var(--ink)}
.teaser-actions{display:flex;justify-content:center;margin-top:26px}
.realisations-teaser .photo-carousel{margin-top:4px}
@media(max-width:800px){
  .mid-cta{padding:26px 0}
  .mid-cta-inner{flex-direction:column;align-items:flex-start;gap:16px}
  .mid-cta-inner p{font-size:1.1rem}
  .mid-cta-inner .button{width:100%}
}

/* ── Navigation : sous-menus atteignables à la souris ──
   Un écart séparait l'onglet de son panneau : le survol se perdait en le traversant
   et le menu se refermait avant le clic. On comble l'écart par un pont invisible
   et on laisse un court délai avant la fermeture. */
@media(min-width:801px){
  .nav-submenu-level2:before{
    content:"";position:absolute;top:-6px;right:100%;width:24px;height:calc(100% + 12px);
  }
  .nav-submenu:before{
    content:"";position:absolute;bottom:100%;left:0;width:100%;height:12px;
  }
  .nav-dropdown>.nav-submenu,
  .nav-subgroup>.nav-submenu-level2{transition-delay:.18s}
  .nav-dropdown:hover>.nav-submenu,.nav-dropdown:focus-within>.nav-submenu,.nav-dropdown.open>.nav-submenu,
  .nav-subgroup:hover>.nav-submenu-level2,.nav-subgroup:focus-within>.nav-submenu-level2,.nav-subgroup.open>.nav-submenu-level2{transition-delay:0s}
  /* zone de tolérance sous l'onglet principal, jusqu'au panneau */
  .nav-dropdown:after{content:"";position:absolute;top:100%;left:0;width:100%;height:10px}
}

/* quand un panneau est ouvert, les autres pastilles s'effacent pour ne pas le recouvrir */
.pergola-visual:has(.pergola-hotspot.open) .pergola-hotspot:not(.open) .hotspot-button{
  opacity:0;pointer-events:none;transform:scale(.85);
}
/* les pastilles situées à droite de l'image ouvrent leur panneau vers la gauche */
.hotspot-structure .hotspot-panel,
.hotspot-lames .hotspot-panel{left:auto;right:calc(100% + 16px);transform:translate(-8px,-50%)}
.hotspot-structure:hover .hotspot-panel,.hotspot-structure:focus-within .hotspot-panel,.hotspot-structure.open .hotspot-panel,
.hotspot-lames:hover .hotspot-panel,.hotspot-lames:focus-within .hotspot-panel,.hotspot-lames.open .hotspot-panel{transform:translate(0,-50%)}
.hotspot-structure .hotspot-panel:before,
.hotspot-lames .hotspot-panel:before{right:auto;left:100%}
.hotspot-kicker{font-size:.6rem;letter-spacing:.16em;margin-bottom:12px}
.hotspot-panel small{margin-top:12px;line-height:1.45}

.swatch-row{grid-template-columns:1fr 1fr;gap:12px 10px}
.swatch-row-5{grid-template-columns:repeat(5,1fr);gap:8px 4px}
.swatch-row span{
  grid-template-columns:none;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:.6rem;text-align:center;line-height:1.2;color:var(--muted);
}
.swatch-row i{
  width:38px;height:38px;border-radius:9px;background:var(--swatch);
  border:1px solid rgba(19,27,32,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.swatch-row-5 i{width:30px;height:30px;border-radius:7px}
.swatch-ral{
  background:conic-gradient(#e8534a,#f2c14e,#5ec26a,#4aa3e8,#8c5ec2,#e8534a) !important;
}

.option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:4px}
.option-grid span{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:.58rem;text-align:center;line-height:1.2;color:var(--muted);
}
.opt{
  position:relative;display:block;width:100%;height:52px;border-radius:6px;overflow:hidden;
  border:1px solid rgba(19,27,32,.14);background:#e9e6e0;
}
.opt-zip{background:linear-gradient(180deg,#4a4f52 0 9px,#9aa0a3 9px)}
.opt-claustra{background:repeating-linear-gradient(180deg,#3f4548 0 5px,#e9e6e0 5px 9px)}
.opt-vinyle{background:linear-gradient(90deg,#4a4f52 0 42%,#cfd6da 42%)}

.evacuation-grid{grid-template-columns:repeat(5,1fr);gap:8px 5px}
.evacuation-grid span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.52rem;line-height:1.15}
.evacuation-grid b{
  color:var(--gold);font-size:.6rem;letter-spacing:.06em;
}
.drain{height:38px;width:100%;margin-bottom:0;border-radius:4px}

@media(max-width:600px){
  .hotspot-panel{width:auto}
  .swatch-row i{width:34px;height:34px}
  .swatch-row-5 i{width:26px;height:26px}
  .opt{height:44px}
  .evacuation-grid span{font-size:.6rem}
  .evacuation-grid b{font-size:.68rem}
}

/* ── Chemin de contact : téléphone dans le menu mobile ── */
.nav-call{display:none}
.nav-call svg{flex:0 0 17px;width:17px;height:17px}
@media(max-width:800px){
  .nav-call{
    display:flex;align-items:center;justify-content:center;gap:10px;
    min-height:52px;margin:10px 0 4px;padding:0 18px;
    border:1px solid rgba(224,189,125,.45);border-radius:2px;
    background:rgba(224,189,125,.06);
    color:var(--gold2);font-weight:800;letter-spacing:.06em;font-size:.95rem;
    transition:background .2s ease,border-color .2s ease;
  }
  .nav-call:active{background:rgba(224,189,125,.14);border-color:var(--gold2)}
  .nav-call span{line-height:1}
}

/* ── Filtres de la galerie : compactés pour laisser voir les photos ── */
.filter{padding:12px 16px;gap:12px;border:0;box-shadow:none;background:transparent;border-radius:9px}
.filter:hover{transform:none;background:rgba(19,27,32,.045);box-shadow:none}
.filter .filter-icon{flex:0 0 20px;width:20px;height:20px}
.filter-all{padding:19px 24px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(17,24,28,.05)}
.filter-all:hover{background:#fff;transform:translateY(-2px);box-shadow:0 14px 32px rgba(17,24,28,.1)}
@media(max-width:800px){
  .filter-bar{grid-template-columns:1fr;gap:10px;margin-bottom:26px}
  .filter-group-toggle{padding:17px 18px;font-size:.7rem;gap:12px}
  .filter-group-toggle .filter-icon{flex-basis:21px;width:21px;height:21px}
  .filter-all{padding:16px 18px;font-size:.7rem}
  .filter{padding:11px 12px;font-size:.68rem;gap:10px}
  .filter .filter-icon{flex-basis:18px;width:18px;height:18px}
  .filter .filter-label{padding-bottom:0}
  /* la page démarre sur la galerie : on réduit le retrait sous l'en-tête fixe */
  #portfolio{padding-top:96px;padding-bottom:40px}
}

/* ── Configurateur pergola : utilisable au doigt ── */
@media(max-width:600px){
  /* content-visibility crée un bloc conteneur qui sortait les panneaux de l'écran */
  .pergola-configurator{content-visibility:visible;contain:none}
  .pergola-configurator .hotspot-button{width:44px;height:44px}
  .pergola-configurator .hotspot-button span[aria-hidden]{font-size:1.3rem}
  .pergola-configurator .hotspot-fermetures{left:42%;top:56%}
  .evacuation-grid{grid-template-columns:repeat(3,1fr)}
  .evacuation-grid span{font-size:.68rem}
}

/* ── Lisibilité mobile : corps de texte à 16 px minimum ── */
@media(max-width:800px){
  .icon-card p,.article-card p,.number-card p,.project-card p,
  .three-gallery figcaption,.atelier-points span,.trust-grid span,
  .stats-grid span,.site-footer p,.site-footer a{font-size:1rem;line-height:1.6}
  .check-list li{font-size:.95rem}
  .button{font-size:.8rem}
  .carousel-hint{font-size:.75rem}
  /* cibles tactiles du pied de page */
  .site-footer a{min-height:44px;display:flex;align-items:center;margin:2px 0}
}

/* ── Contraste de l'or sur fond clair (2,44:1 → 5,1:1) ── */
.eyebrow:not(.light),.text-link,.filter-group-label,
.project-card small,.article-card small{color:#8d651f}
.home .trust-grid b{color:#8d651f}
.footer-bottom{color:rgba(255,255,255,.62)}

/* Pages légales et page de remerciement */
.legal-page-body main>.section:first-child{padding-top:150px}
.legal-page h1{margin-bottom:26px}
.legal-page h2{font-size:1.5rem;margin:44px 0 14px}
.legal-page .prose{margin-bottom:14px}
.legal-list{list-style:none;padding:0;margin:0 0 18px}
.legal-list li{padding:11px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:#596064}
.legal-list li b{display:inline-block;min-width:230px;color:var(--ink);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.todo{display:inline-block;padding:2px 9px;border-radius:4px;background:#fdf3d8;border:1px dashed #c9a227;color:#7a5c00;font-size:.82rem;font-weight:700}
.legal-updated{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}
@media(max-width:800px){
  .legal-page-body main>.section:first-child{padding-top:112px}
  .legal-list li b{display:block;min-width:0;margin-bottom:4px}
}

/* Formulaire de contact simplifié */
.contact-page main>.section:first-child{padding-top:150px}
.contact-side h1{font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.05;margin-bottom:22px}
.form-title{font-size:1.7rem;margin-bottom:24px}
.contact-box a{color:#fff;display:flex;align-items:center;min-height:44px;margin:0}
.contact-box a:hover{color:var(--gold2)}
.optional{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}
/* 16 px minimum : empêche le zoom automatique de Safari iOS au focus */
.form-grid input,.form-grid select,.form-grid textarea{font-size:16px}
.consent{align-items:flex-start;gap:12px}
.consent input{width:22px;height:22px;flex:0 0 22px;margin-top:2px;min-height:auto}
.consent span{font-size:.9rem;line-height:1.5}
.consent a{text-decoration:underline}
.checkbox-group span{min-height:44px;display:flex;align-items:center;font-size:.9rem}
@media(max-width:800px){
  .contact-page main>.section:first-child{padding-top:112px}
}

/* Galerie réalisations — cadre identique pour toutes, photo entière visible */
.project-card>img,.project-card .card-media{
  width:100%;aspect-ratio:4/3;display:block;background:#eeeae2;
}
.project-card>img{object-fit:contain;object-position:center}
/* le texte alternatif ne doit pas s'afficher dans le cadre pendant le chargement différé
   (l'attribut alt reste présent pour les lecteurs d'écran et le référencement) */
.project-card img,.card-carousel img,.carousel-slide img{color:transparent;font-size:0}
/* photos déjà au format du cadre : elles le remplissent, sans bande ni perte visible */
.project-card>img.fit-cover,.card-carousel .card-slide.fit-cover{object-fit:cover}
.project-card .zoomable{cursor:zoom-in}

/* Visionneuse plein écran */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(8,12,15,.94);backdrop-filter:blur(4px);padding:40px 60px;
}
.lightbox.open{display:grid}
.lightbox img{max-width:100%;max-height:calc(100vh - 120px);object-fit:contain;display:block;border-radius:4px}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute;display:grid;place-items:center;width:48px;height:48px;
  border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(255,255,255,.08);
  color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;transition:background .2s ease,border-color .2s ease;
}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:var(--gold);border-color:var(--gold)}
.lightbox-close{top:22px;right:26px}
.lightbox-prev{left:18px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:18px;top:50%;transform:translateY(-50%)}
.lightbox-caption{
  position:absolute;left:0;right:0;bottom:20px;text-align:center;
  color:rgba(255,255,255,.66);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
}
body.lightbox-open{overflow:hidden}
@media(max-width:600px){
  .lightbox{padding:20px 12px}
  .lightbox-prev,.lightbox-next{width:40px;height:40px}
  .lightbox-prev{left:6px}.lightbox-next{right:6px}
}

/* Carrousel intégré aux cartes de réalisations */
.card-carousel{
  position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  cursor:grab;background:#eeeae2;height:100%;
}
.card-carousel::-webkit-scrollbar{display:none}
.card-carousel.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.card-carousel .card-slide{
  flex:0 0 100%;width:100%;height:100%;object-fit:contain;object-position:center;
  scroll-snap-align:center;display:block;pointer-events:none;
}
.card-media{position:relative}
.card-dots{
  position:absolute;left:0;right:0;bottom:12px;z-index:2;
  display:flex;justify-content:center;gap:6px;pointer-events:none;
}
.card-dots i{
  width:6px;height:6px;border-radius:50%;background:rgba(19,27,32,.28);
  transition:background .25s ease,width .25s ease;
}
.card-dots i.active{background:var(--gold);width:16px;border-radius:3px}
.card-count{
  position:absolute;top:12px;right:12px;z-index:2;pointer-events:none;
  display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;
  background:rgba(10,15,18,.62);backdrop-filter:blur(6px);
  color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.08em;
}
.card-count svg{width:12px;height:12px}

/* Carrousel photos — pages produit métallerie */
.photo-carousel{
  position:relative;width:100%;overflow-x:auto;overflow-y:hidden;padding:4px 0 10px;
  cursor:grab;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.photo-carousel::-webkit-scrollbar{display:none}
.photo-carousel.dragging{cursor:grabbing;user-select:none}
.carousel-track{display:flex;width:max-content}
.carousel-set{display:flex;align-items:stretch;gap:14px;padding-right:14px}
.carousel-slide{
  position:relative;flex:0 0 auto;width:min(460px,80vw);aspect-ratio:4/3;overflow:hidden;
  border-radius:14px;background:var(--ink2);box-shadow:0 16px 42px rgba(17,24,28,.14);
}
.carousel-slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;pointer-events:none;
}
.photo-carousel:not(.dragging) .carousel-slide:hover img{transform:scale(1.04)}
.carousel-hint{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  color:var(--muted);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:800;
}
.carousel-hint span{color:var(--gold);font-size:.9rem;line-height:1}
@media(max-width:600px){
  .carousel-slide{width:min(320px,84vw)}
}

/* Bandeau atelier — fabrication maison */
.atelier-band{background:var(--ink);color:#fff;padding:58px 0}
.atelier-band .atelier-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;align-items:center}
.atelier-band h2{color:#fff;font-size:clamp(2rem,3.4vw,3.2rem);margin-bottom:0}
.atelier-band p{color:rgba(255,255,255,.7);margin:0}
.atelier-points{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.atelier-points b{display:block;color:var(--gold2);text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;margin-bottom:5px}
.atelier-points span{font-size:.78rem;color:rgba(255,255,255,.66)}
@media(max-width:800px){
  .atelier-band .atelier-inner{grid-template-columns:1fr;gap:26px}
  .atelier-points{grid-template-columns:1fr}
}

/* Accueil plus lumineux — équilibre blanc pierre, bronze et anthracite */
.home{
  background:#fcfbf8;
}
.home .page-hero.homepage-hero{
  background:#d9d2c7;
}
.home .page-hero.homepage-hero .hero-media{
  width:100%;
  object-fit:cover;
  object-position:center 52%;
  filter:brightness(1.12) saturate(1.01);
}
.home .page-hero.homepage-hero .hero-shade{
  background:
    linear-gradient(90deg,rgba(9,15,18,.76) 0%,rgba(9,15,18,.62) 29%,rgba(9,15,18,.28) 51%,rgba(9,15,18,.02) 77%),
    linear-gradient(0deg,rgba(8,13,16,.18),transparent 48%);
}
.home .trust-strip{
  background:linear-gradient(90deg,#f7f3ec 0%,#fff 52%,#f3ede4 100%);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.home .trust-grid>div{
  border-right-color:rgba(19,27,32,.12);
}
.home .trust-grid b{
  color:#a9783e;
}
.home .trust-grid span{
  color:#60686c;
}
.home .v3-categories{
  background:#f6f2eb;
}
.home .category-v3:after{
  background:linear-gradient(0deg,rgba(8,13,16,.79) 0%,rgba(8,13,16,.28) 36%,rgba(8,13,16,0) 70%);
}
.home .legacy-card:after{
  background:linear-gradient(0deg,rgba(7,12,15,.79) 0%,rgba(7,12,15,.25) 38%,rgba(7,12,15,0) 72%);
}
.home .process,
.home .editorial-preview{
  background:#fff;
}
@media(max-width:800px){
  .home .page-hero.homepage-hero{
    background:#f6f2eb;
  }
  .home .page-hero.homepage-hero .hero-media{
    filter:brightness(1.1) saturate(1.01);
  }
  .home .page-hero.homepage-hero .hero-content{
    background:#f6f2eb;
    color:var(--ink);
  }
  .home .page-hero.homepage-hero h1{
    color:var(--ink);
  }
  .home .page-hero.homepage-hero .hero-lead{
    color:#5c6569;
  }
  .home .page-hero.homepage-hero .eyebrow.light{
    color:#a9783e;
  }
  .home .page-hero.homepage-hero .button.outline{
    border-color:var(--ink);
    color:var(--ink);
  }
  .home .trust-grid>div{
    border-bottom-color:rgba(19,27,32,.12);
  }
}

/* V34.9 — Respiration entre la barre de catégories et la galerie.
   Sans cet écart, l'œil enchaîne les filtres et les photos sans pause :
   on saute la sélection de catégorie et on descend directement. */
.filter-bar{margin-bottom:96px}
@media(max-width:760px){
  .filter-bar{margin-bottom:56px}
}

/* V35.2 — Carrousel des sous-catégories d'une même gamme, en bas de page produit.
   Réutilise .photo-carousel pour hériter du défilement auto et du glisser du script. */
.subcat-carousel .carousel-slide{
  width:min(300px,72vw);aspect-ratio:auto;display:block;text-decoration:none;
  background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(17,24,28,.08);
}
.subcat-carousel .carousel-slide img{
  position:static;inset:auto;width:100%;height:190px;object-fit:cover;display:block;
}
.subcat-carousel .carousel-slide span{
  display:block;padding:14px 18px;font-family:var(--font-title,inherit);
  font-size:1.02rem;color:var(--ink);line-height:1.25;
}
.subcat-carousel .carousel-slide:after{
  content:"→";position:absolute;right:16px;bottom:14px;color:var(--gold);
  font-size:1rem;opacity:0;transform:translateX(-6px);transition:.25s ease;
}
.photo-carousel:not(.dragging) .subcat-slide:hover{border-color:rgba(197,154,85,.5)}
.photo-carousel:not(.dragging) .subcat-slide:hover:after{opacity:1;transform:translateX(0)}
/* La page en cours reste visible dans la gamme, mais signalée comme telle. */
.subcat-carousel .subcat-slide.is-current{border-color:var(--gold)}
.subcat-carousel .subcat-slide.is-current span:after{
  content:" — vous êtes ici";color:var(--muted);font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:800;
}
@media(max-width:600px){
  .subcat-carousel .carousel-slide{width:min(240px,66vw)}
  .subcat-carousel .carousel-slide img{height:150px}
  .subcat-carousel .carousel-slide span{padding:12px 14px;font-size:.94rem}
}

/* V35.3 — Diaporama du hero d'accueil.
   Les vues sont déjà superposées en position absolue : seule l'opacité change. */
.page-hero.homepage-hero .hero-media{opacity:0;transition:opacity 1.6s cubic-bezier(.4,0,.2,1)}
.page-hero.homepage-hero .hero-media.is-active{opacity:1}
.hero-dots{
  position:absolute;z-index:2;right:max(24px,calc((100vw - 1180px)/2));bottom:26px;
  display:flex;gap:9px;
}
.hero-dots button{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.75);background:transparent;
  transition:background .25s ease,transform .25s ease;
}
.hero-dots button:hover{transform:scale(1.25)}
.hero-dots button[aria-current="true"]{background:var(--gold);border-color:var(--gold)}
@media(max-width:760px){
  .hero-dots{right:auto;left:24px;bottom:18px}
}
/* Défilement désactivé si l'utilisateur a demandé moins d'animations :
   la première vue reste affichée et les puces disparaissent. */
@media(prefers-reduced-motion:reduce){
  .page-hero.homepage-hero .hero-media{transition:none}
  .hero-dots{display:none}
}

/* V35.4 — Le diaporama du hero tient dans un cadre propre.
   Sans ce conteneur, la règle mobile repassait les vues en flux normal
   et les cinq photos se retrouvaient empilées les unes sous les autres. */
.page-hero.homepage-hero .hero-slides{position:absolute;inset:0;z-index:0}
.page-hero.homepage-hero .hero-slides .hero-media{
  position:absolute;inset:0;width:100%;height:100%;
}
@media(max-width:800px){
  .page-hero.homepage-hero .hero-slides{
    position:relative;inset:auto;width:100%;aspect-ratio:4/3;
  }
  .page-hero.homepage-hero .hero-slides .hero-media{
    position:absolute;inset:0;height:100%;object-fit:cover;object-position:center;
  }
  /* Les puces reviennent sur la photo, pas sous le bloc de texte. */
  .hero-dots{left:auto;right:16px;bottom:auto;top:calc(75vw - 34px)}
}

/* V35.5 — Le rail des carrousels est animé par transformation.
   will-change le confie au compositeur : le déplacement devient sous-pixel,
   au lieu d'être aligné sur la grille physique comme l'est scrollLeft. */
.carousel-track,.reviews-track{will-change:transform;backface-visibility:hidden}

/* V35.6 — Plan d'accès interactif. */
.map-grid{display:grid;grid-template-columns:1fr}
.map-cadre{
  position:relative;min-height:295px;overflow:hidden;
  border:1px solid var(--line);background:#eeeae2;
}
.map-cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:860px){
  .map-cadre{min-height:0;aspect-ratio:2/1}
}

/* V35.7 — Invitation à visiter le showroom, juste avant le plan d'accès. */
.showroom-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center}
.showroom-photo{margin:0;overflow:hidden;border:1px solid var(--line);background:#eeeae2}
.showroom-photo img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
.showroom-texte h2{margin:8px 0 18px}
.showroom-texte p{color:var(--muted);margin:0 0 14px;line-height:1.65}
.showroom-texte .eyebrow{margin:0}
.showroom-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
@media(max-width:900px){
  .showroom-grid{grid-template-columns:1fr;gap:24px}
  .showroom-texte h2{margin-top:4px}
}

/* V36.1 — Logo agrandi.
   La ligne « Aménagement extérieur » est un texte de 27 unités dans un viewBox
   de 220 : sous ~230 px de large, elle tombe en dessous de 8 px à l'écran et
   devient illisible. La hauteur du bandeau suit pour que le bloc tienne. */
.site-header{height:96px}
.site-header.scrolled{height:80px}
.logo{width:258px;height:75px}
.site-header.scrolled .logo{width:226px;height:66px}
@media(min-width:1121px){ .logo{width:258px} }
@media(min-width:801px) and (max-width:1120px){ .logo{width:224px;height:65px} }
@media(max-width:1050px){ .logo{width:224px} }
@media(max-width:800px){
  .site-header{height:80px}
  .logo,.site-header.scrolled .logo{width:216px;height:63px}
}

/* Le logo est un élément flex : sans cette ligne il se rétracte sous sa largeur
   déclarée dès que la barre de navigation est à l'étroit, et le texte redevient
   illisible. Entre 801 et 1120 px la place est comptée, on l'y garde plus mesuré. */
.logo{flex:0 0 auto}
@media(min-width:801px) and (max-width:1120px){ .logo,.site-header.scrolled .logo{width:206px;height:60px} }

/* V36.3 — Aération du bandeau.
   Entre 801 et 1120 px tout tenait de justesse : le bouton passait sur deux
   lignes et les libellés se touchaient. Le menu déroulant prend désormais le
   relais dès 1040 px, ce qui laisse la barre complète respirer au-dessus. */
.site-header{height:104px}
.site-header.scrolled{height:86px}
.nav-shell{gap:38px}
.nav-links{gap:30px;font-size:.68rem}
.nav-links > a,.nav-drop-toggle{white-space:nowrap}
.nav-contact{padding:15px 22px;white-space:nowrap}
.nav-call{white-space:nowrap}

@media(min-width:1041px){
  .logo,.site-header.scrolled .logo{width:258px;height:75px}
}
@media(max-width:800px){
  .site-header{height:86px}
  .site-header.scrolled{height:86px}
  .logo,.site-header.scrolled .logo{width:226px;height:66px}
  .menu-button{display:block}
  .nav-links{display:none}
  /* le panneau doit démarrer exactement sous le bandeau */
  .nav-links{top:86px}
}
@media(max-width:600px){
  .site-header,.site-header.scrolled{height:78px}
  .logo,.site-header.scrolled .logo{width:206px;height:60px}
  .nav-links{top:78px}
}

/* Le panneau mobile doit rester affichable : la règle display:none ci-dessus
   masque la barre au repos, .open la ré-affiche. Sans ce rappel placé après,
   le bouton burger n'ouvrait plus rien entre 801 et 1040 px. */
@media(max-width:800px){
  .nav-links{
    position:absolute;top:86px;left:0;right:0;
    background:#11191e;padding:25px 24px;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .nav-links.open{display:flex}
  .nav-contact{text-align:center;margin-top:12px}
  .nav-drop-toggle{width:100%;text-align:left;padding:14px 0;font-size:.72rem}
  .nav-links > a{padding:14px 0;font-size:.72rem}
}
@media(max-width:600px){ .nav-links{top:78px} }

/* Les sous-menus doivent passer en accordéon partout où le burger s'affiche.
   Ces règles n'allaient que jusqu'à 800 px : entre 801 et 1040 px ils se
   seraient ouverts en panneaux flottants au milieu du menu déplié. */
@media(max-width:800px){
  .nav-drop-toggle{width:100%;text-align:left;padding:14px 0}
  .nav-drop-toggle span{margin-left:auto}
  .nav-drop-toggle:after{display:none}
  .nav-submenu{display:none;position:static;min-width:0;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:rgba(255,255,255,.035);padding:4px 10px 8px}
  .nav-dropdown.open .nav-submenu{display:block}
  .nav-dropdown:hover .nav-submenu{transform:none}
  .nav-submenu a{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.07)!important}
  .nav-submenu-portails,.nav-submenu-metal,.nav-submenu-wide{min-width:0}
}

/* V36.6 — Retour à la barre complète : pas de menu à dérouler sur ordinateur.
   Le passage au bouton hamburger dès 1040 px est annulé ; entre 801 et 1040 px
   la barre est simplement compactée pour tenir sur une seule ligne. */
@media(min-width:801px){
  .site-header .nav-links{
    display:flex;position:static;flex-direction:row;align-items:center;
    background:none;padding:0;top:auto;left:auto;right:auto;
  }
  .site-header .menu-button{display:none}
  /* on rétablit les panneaux flottants au survol */
  .nav-submenu{
    display:block;position:absolute;top:calc(100% - 4px);left:-20px;min-width:245px;
    background:#11191e;padding:10px;
  }
  .nav-submenu-portails{min-width:270px}
  .nav-submenu-metal{min-width:250px}
  .nav-drop-toggle{width:auto;text-align:left;padding:0}
  .nav-submenu a{border-bottom:0!important;padding:11px 13px 11px 16px}
}
@media(min-width:801px) and (max-width:1040px){
  .site-header,.site-header.scrolled{height:88px}
  .logo,.site-header.scrolled .logo{width:184px;height:53px}
  .nav-shell{gap:18px}
  .nav-links{gap:14px;font-size:.56rem}
  .nav-drop-toggle{font-size:.56rem}
  .nav-contact{padding:11px 13px}
  /* le téléphone est déjà masqué hors mobile par la règle d’origine */
}

/* Le panneau du menu mobile pouvait dépasser le bas de l'écran une fois les
   trois familles dépliées : 747 px de contenu dans 800 px de haut, sans
   possibilité de faire défiler. Il est désormais borné et défilable. */
@media(max-width:800px){
  .nav-links{max-height:calc(100vh - 86px);overflow-y:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:600px){
  .nav-links{max-height:calc(100vh - 78px)}
}

/* V36.8 — Panneau mobile : on revient au positionnement d'origine (fixed,
   borné en dvh), que mes règles précédentes avaient forcé en absolute — d'où
   un panneau écrasé à la hauteur de ses seules marges. Seul le décalage change,
   pour suivre la nouvelle hauteur de bandeau. */
@media(max-width:800px){
  .nav-links{
    position:fixed;top:86px;left:0;right:0;
    max-height:calc(100dvh - 86px);overflow-y:auto;
  }
}
@media(max-width:600px){
  .nav-links{top:78px;max-height:calc(100dvh - 78px)}
}