*{box-sizing:border-box}body{margin:0;color:#20282a;font:17px system-ui,sans-serif;background:#c6ccce url('../chrome-clair.jpg') center top/cover fixed}.shell{width:100%;margin-inline:auto;min-height:100vh;padding:24px clamp(18px,4vw,70px);background:linear-gradient(#ffffffa8,#ffffffa8),url('../chrome-clair.jpg') center top/cover no-repeat}.banner{height:168px;overflow:hidden;border-radius:9px;background:linear-gradient(90deg,#eef0ef,#9ca4a6)}.banner img{display:block;height:168px;width:1065px;max-width:none;filter:grayscale(1)}.themes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:15px 0;padding:9px;background:linear-gradient(#585f63,#353b3f);border-radius:9px;color:#e9eced;font-size:15px}.themes a,.themes span{padding:7px 10px;border-radius:7px;background:#e2e3e2;color:#292d2f;text-decoration:none}.themes [aria-current]{background:#343a3e;color:white;box-shadow:inset 3px 0 0 #d6dbdd}.themes b{font-weight:500}.periods{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:15px 0}.periods button{min-height:56px;padding:7px;border:1px solid #9ba7a9;border-radius:6px;background:linear-gradient(150deg,#f5f6f5,#bdc6c8);color:#20282a;font:600 15px system-ui;cursor:pointer}.periods button[aria-current=true]{outline:3px solid #454e50;outline-offset:2px;background:linear-gradient(#f0e8dc,#b6aa98)}.periods small{display:block;font-size:12px;font-weight:400}.timeline{position:relative;min-height:340px;padding:18px 52px 34px;border-radius:10px;background:linear-gradient(145deg,#303638,#1e2426);box-shadow:inset 0 1px 6px #000a,0 10px 20px #0003;color:#f3f3f1}.timeline h1{margin:0;font:400 28px Georgia,serif}.timeline .identity{margin:5px 0 0;font-size:16px;line-height:1.35;color:#dee3e2}.viewport{overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;padding-top:48px}.viewport::-webkit-scrollbar{display:none}.track{display:flex;align-items:flex-start;min-width:max-content;padding-top:44px;border-top:2px solid #d2d9d8}.event{position:relative;flex:none;width:154px;text-align:center}.event:before{content:'';position:absolute;top:-44px;left:50%;height:43px;border-left:2px solid #b9c4c4}.event .year{position:absolute;top:-77px;left:0;width:100%;font-weight:750;color:#dce4e3}.event button{display:block;width:140px;min-height:90px;margin:auto;padding:10px 7px;border:1px solid #adb9b8;border-radius:7px;background:linear-gradient(#e9eeed,#b7c2c2);color:#172023;font:650 14px/1.25 system-ui;cursor:pointer;box-shadow:0 6px 11px #0008}.event button:hover,.event button:focus-visible{outline:2px solid #fff}.event.in-period button{background:linear-gradient(#fff,#d6dedf);outline:2px solid #f3f7f6}.event:not(.in-period){opacity:.65}.event button[aria-pressed=true],.event.in-period button[aria-pressed=true]{background:linear-gradient(#ede6db,#b6a693);color:#24201b;outline:3px solid #f7f2eb;outline-offset:3px;box-shadow:0 0 0 7px #c8b99f88,0 13px 24px #000a;transform:translateY(-8px)}.arrow{position:absolute;top:180px;width:40px;height:40px;border:1px solid #8e9b9d;border-radius:50%;background:linear-gradient(#f3f6f5,#adb9bb);font-size:23px;cursor:pointer}.previous{left:10px}.next{right:10px}.arrow:disabled{opacity:.4;cursor:default}.detail{min-height:230px;margin:16px 0;padding:24px 28px;background:#e9eded;border:1px solid #b0bbbd;border-radius:8px;box-shadow:0 4px 14px #0002}.detail .eyebrow{margin:0;color:#566166;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:750}.detail h2{margin:8px 0;font:400 32px Georgia,serif}.detail p{max-width:1100px;line-height:1.5;margin:8px 0}.detail .context{font-weight:600;color:#39484b}.detail a{display:inline-block;margin-top:9px;color:#244955;text-underline-offset:3px}.intro{font-size:15px;color:#4b5557;margin:12px 0}.status{font-size:13px;color:#566063}@media(min-width:2200px){.shell{width:76.923%;zoom:1.3}}@media(max-width:800px){.shell{padding:12px}.banner{height:100px}.banner img{height:100px;width:634px}.periods{grid-template-columns:repeat(3,1fr)}.timeline{padding:22px 45px 28px}.detail{padding:18px;min-height:260px}}@media(max-width:480px){.periods{grid-template-columns:repeat(2,1fr)}.timeline h1{font-size:25px}.timeline .identity{font-size:15px}}

/* Un parcours distinct par entreprise. Les années restent dans le cadre visible. */
.periods{grid-template-columns:repeat(6,minmax(0,1fr))}.periods button{font-size:17px}.timeline{min-height:310px}.viewport{padding-top:22px}.track{padding-top:75px}.event{width:190px}.event button{width:174px;min-height:95px;font-size:16px}.event .year{top:-79px;font-size:20px;color:#fff}.event:before{top:-74px;height:73px}.event:not(.in-period){opacity:1}.detail{min-height:200px}.detail p{font-size:18px}.detail .eyebrow{font-size:13px}.detail .source{font-size:14px}.arrow{top:175px}@media(max-width:800px){.periods{grid-template-columns:repeat(3,1fr)}.event{width:165px}.event button{width:152px;font-size:14px}}@media(max-width:480px){.periods{grid-template-columns:repeat(2,1fr)}}

/* Navigation thématique dans le bandeau vertical de gauche. */
@media(min-width:1000px){.shell{display:grid;grid-template-columns:190px minmax(0,1fr);column-gap:20px;align-content:start}.banner{grid-column:1/-1}.themes{grid-column:1;grid-row:2 / span 5;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:9px;margin:15px 0 0;padding:14px 10px;min-width:0}.themes b{padding:6px 10px;color:#eef2f2}.themes a,.themes span{display:flex;align-items:center;min-height:43px;padding:9px 12px;font-size:15px}.intro,.periods,.timeline,.detail,.status{grid-column:2;min-width:0}.intro{margin:15px 0 10px}.periods{grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 14px}.periods button{min-height:54px}.timeline{margin:0}.detail{margin:14px 0 0}.status{margin:10px 0}}
.periods{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:9px}.periods button{min-height:39px;padding:5px;font-size:15px}.other-brands{margin:0 0 12px;padding:7px 12px;border:1px solid #aab5b7;border-radius:7px;background:#edf0ef;color:#263134}.other-brands summary{cursor:pointer;font-weight:650}.other-brands summary span{font-weight:400;color:#516064}.other-brands label{display:block;margin:12px 0 5px;font-size:14px}.other-brands input{width:min(100%,360px);padding:8px 10px;border:1px solid #94a2a4;border-radius:5px;font:16px system-ui}.brand-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:10px 0 4px}.brand-list button{min-height:33px;padding:5px;border:1px solid #abb7b8;border-radius:5px;background:#f8faf9;color:#263134;font:14px system-ui;cursor:pointer}.brand-list button[hidden]{display:none}.brand-list button[aria-current=true]{outline:2px solid #454e50;background:#ded3c4}.no-results{margin:8px 0}.track.empty{min-width:100%;height:110px}.arrow:disabled{opacity:.3}@media(min-width:1000px){.other-brands{grid-column:2}.periods{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:9px}.periods button{min-height:39px}}@media(max-width:800px){.periods{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:480px){.brand-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.brand-picker{min-width:0}.other-brands{min-width:0}.other-brands input{width:100%}.brand-list button{overflow-wrap:anywhere}@media(min-width:1200px){.brand-picker{grid-column:2;display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);gap:12px;align-items:start;margin-bottom:10px}.brand-picker .periods{grid-column:auto;margin:0}.brand-picker .other-brands{grid-column:auto;margin:0;padding:7px 10px}.other-brands label{margin:3px 0 2px}.other-brands input{padding:5px 9px;font-size:14px}.brand-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;margin:5px 0 0}.brand-list button{min-height:27px;padding:3px;font-size:12px;line-height:1.1}.brand-picker .periods button{min-height:43px}.other-brands summary{font-size:14px}.other-brands summary span{display:block;font-size:12px}}@media(min-width:1000px) and (max-width:1199px){.brand-picker{grid-column:2}}
@media(min-width:1200px){.timeline{min-height:260px;padding-bottom:16px}.detail{min-height:0;margin-top:8px;padding-top:14px;padding-bottom:14px}}
/* Le bandeau reprend la même finition que celui des Appareils. */
.banner{background:linear-gradient(100deg,#e7e8e7,#bfc4c5 75%,#92999b);box-shadow:inset 0 0 20px #25292b3d,0 12px 28px #14181a35}.banner img{filter:grayscale(1) contrast(1.12);object-fit:cover;mask-image:linear-gradient(to right,#000 0%,#000 85%,transparent 100%)}
/* Plateau noir graphite derrière le choix des marques. */
.intro{margin:12px 0 0;padding:10px 13px 4px;background:#202628;color:#f2f4f3;border-radius:9px 9px 0 0}.brand-picker{padding:7px 9px 10px;background:#202628;border-radius:0 0 9px 9px;box-shadow:0 8px 18px #1116}.other-brands{background:#30383a;color:#f3f5f4;border-color:#657174}.other-brands summary span{color:#c7d1d1}.other-brands label{color:#e1e8e7}@media(min-width:1200px){.brand-picker{margin-bottom:10px}.brand-picker .other-brands{background:#30383a}}
.brand-picker{border-radius:9px;margin-top:14px}@media(min-width:1200px){.brand-picker{margin-top:14px}}
/* Identité de la marque : visible avant la frise. */
.timeline h1{font:600 clamp(36px,3vw,46px)/1.08 Georgia,serif;color:#fff;letter-spacing:.005em;text-shadow:0 2px 8px #0009}
.timeline .identity{margin:9px 0 2px;padding:5px 0 5px 14px;border-left:4px solid #e2cda9;color:#f6efe3;font:550 clamp(17px,1.5vw,21px)/1.3 system-ui,sans-serif;max-width:1000px}
@media(max-width:800px){.timeline h1{font-size:34px}.timeline .identity{font-size:17px}}
.viewport{scroll-snap-type:x mandatory}.event{scroll-snap-align:start}

/* Le titre du tableau des marques reprend la typographie de la fresque. */
.brand-picker .panel-title{grid-column:1/-1;margin:0 0 8px;color:#f1f3f2;text-align:center;font:600 clamp(24px,2.5vw,32px)/1.1 Georgia,serif;text-shadow:0 1px 2px #000}
@media(min-width:1200px){.brand-picker .periods,.brand-picker .other-brands{grid-row:2}}

/* Quinze marques phares en cinq lignes et trois colonnes. */
@media(min-width:1200px){.brand-picker{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}.brand-picker .periods{grid-template-columns:repeat(3,minmax(0,1fr))}.brand-picker .periods button{min-height:53px;padding:7px 5px}}
.brand-picker .saga-periods{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:10px 0 0}
.brand-picker .saga-periods button{min-height:40px;padding:5px 3px;border:1px solid #697577;border-radius:5px;background:#384244;color:#dce5e3;font:650 14px/1.2 system-ui;cursor:pointer}
.brand-picker .saga-periods button:disabled{color:#889597;opacity:.65;cursor:default}
.brand-picker .saga-periods button[aria-current="true"]{background:linear-gradient(#eee8dd,#c1b4a2);color:#29251d;outline:2px solid #fff;outline-offset:1px}
@media(min-width:1200px){.brand-picker .saga-periods{grid-row:3}}
@media(max-width:800px){.brand-picker .saga-periods{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.brand-picker .saga-periods{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Années au-dessus de l'axe, repères ronds sur l'axe, événements dessous. */
.timeline .viewport{padding-top:44px}
.timeline .track{padding-top:55px}
.timeline .event .year{top:-90px}
.timeline .event:before{top:-54px;height:54px}
.timeline .event:after{content:"";position:absolute;top:-55px;left:50%;width:16px;height:16px;transform:translate(-50%,-50%);border:2px solid #dce5e3;border-radius:50%;background:#465254;box-shadow:0 0 0 3px #273033;pointer-events:none}
.timeline .event:has(button[aria-pressed="true"]):after{background:#f2cf6e;border-color:#8a6b2b;box-shadow:0 0 0 4px #f2cf6e55,0 0 9px 3px #efc44d}

.banner-markers{position:absolute;top:0;left:0;width:1065px;height:168px;pointer-events:none;z-index:2}

.banner{position:relative}
@media(max-width:800px){.banner-markers{width:634px;height:100px}}

/* Une lueur discrète autour des repères du bandeau. */
.banner-markers g:first-child circle{fill:#f2cf6e;filter:drop-shadow(0 0 3px #efc44d) drop-shadow(0 0 7px #eab936)}
.banner-markers g:last-child circle{fill:#f6f8f7;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #92adb4)}
<style>.banner{position:relative}@media(max-width:800px){}
.saga-sidebar{grid-column:1;grid-row:2 / span 3;min-width:0;width:162px}.saga-sidebar .themes{grid-column:auto;grid-row:auto;margin-bottom:0}.lexique-shortcut{display:block;margin:17px 0 0;padding:11px 14px;border:1px solid #aeb8ba;border-left:4px solid #b48a43;border-radius:6px;background:#f6f4ed;color:#263f4c;font:700 15px system-ui,sans-serif;text-decoration:none;box-shadow:0 3px 9px #17202320}.lexique-shortcut:hover,.lexique-shortcut:focus-visible{outline:2px solid #16546b;outline-offset:2px}.lexique-shortcut[aria-current]{background:#263f4c;color:#fff;border-color:#263f4c;border-left-color:#c49b51}@media(max-width:900px){.saga-sidebar{width:auto;grid-column:auto;grid-row:auto}.saga-sidebar .themes{margin-bottom:0}.lexique-shortcut{display:inline-block;margin:4px 0 18px}}
.brand-picker{display:block!important}.brand-picker .periods{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px}.brand-group{border:1px solid #657174;border-radius:6px;padding:10px;min-width:0}.brand-group h3{color:#f2cf6e;font:700 17px system-ui;margin:0 0 8px}.brand-group-buttons{display:flex;flex-wrap:wrap;gap:6px}.brand-group button{min-height:40px;padding:8px 12px;font-size:15px}.brand-picker .other-brands{margin-top:14px}.brand-picker .brand-list{display:flex;flex-wrap:wrap;gap:5px}.brand-picker .brand-list button{font-size:14px;min-height:36px;padding:7px 10px}.company-related{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 18px}.company-related a{color:#f2cf6e;border:1px solid #8c804f;border-radius:5px;padding:8px 12px;text-decoration:none}.company-related a:hover{outline:2px solid #f2cf6e}@media(max-width:650px){.brand-picker .periods{grid-template-columns:1fr!important}}

.secondary-company{grid-column:2;min-width:0;margin-top:14px;padding:22px clamp(20px,3vw,44px) 26px;border-radius:9px;background:#202628;color:#f2f3f1;box-shadow:0 8px 18px #1115}
.secondary-back{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}.secondary-back a{display:inline-block;color:#f2cf6e;text-decoration:none;border:1px solid #8c804f;border-radius:5px;padding:8px 12px;font:650 16px/1.3 system-ui}
.secondary-heading{text-align:center;margin:0 0 24px}.secondary-heading h1{margin:0 0 10px;color:#fff;font:700 38px/1.15 Georgia,serif}.secondary-heading p{margin:8px auto;line-height:1.4}.secondary-tagline{color:#f2cf6e;font-size:21px;font-weight:650}.secondary-meta{color:#f2f3f1;font-size:18px}
.secondary-history{max-width:960px;margin:0 auto}.secondary-history h2{font:650 22px/1.3 Georgia,serif;margin:0 0 12px;color:#f2cf6e}.secondary-history p{font-size:18px;line-height:1.58;margin:0 0 14px}.secondary-history strong{color:#fff}
.secondary-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:960px;margin:24px auto 0}.secondary-images figure{margin:0;min-width:0}.secondary-images a{display:block;border-radius:5px;overflow:hidden}.secondary-images a:focus-visible{outline:3px solid #f2cf6e;outline-offset:4px}.secondary-image{display:flex;align-items:center;justify-content:center;background:#fff;height:214px;padding:12px}.secondary-images img{display:block;max-width:100%;width:auto;height:auto;max-height:190px;object-fit:contain}.secondary-images figcaption{font-size:16px;line-height:1.4;padding-top:10px}.secondary-images figcaption strong,.secondary-images small{display:block}.secondary-images figcaption strong{color:#f2cf6e;margin-bottom:4px;font-size:17px}.secondary-images small{font-size:13px;color:#c4ccce;margin-top:5px}
.secondary-sources{max-width:960px;margin:22px auto 0;border-top:1px solid #586163;padding-top:16px}.secondary-sources summary{cursor:pointer;color:#f2cf6e;font-weight:650;font-size:16px}.secondary-sources p{font-size:15px;line-height:1.5}.secondary-sources a{color:#f2cf6e;text-underline-offset:3px}.secondary-company>.saga-previous-page{margin-bottom:12px}
@media(max-width:999px){.secondary-company{grid-column:auto}.secondary-heading h1{font-size:32px}}@media(max-width:620px){.secondary-images{grid-template-columns:1fr;gap:20px}.secondary-tagline{font-size:19px}.secondary-meta{font-size:17px}.secondary-history p{font-size:17px}.secondary-company{padding:18px}.secondary-heading{margin-bottom:20px}}
@media print{.banner,.saga-sidebar,.secondary-back,.saga-previous-page{display:none!important}.shell{display:block;padding:0;background:#fff}.secondary-company{margin:0;padding:0;box-shadow:none;background:white;color:black}.secondary-heading h1,.secondary-heading p,.secondary-history h2,.secondary-history strong,.secondary-images figcaption strong{color:black}.secondary-images figure{break-inside:avoid}}


.secondary-company{background:#151b1d url('/gainage-graphite.jpg') center/cover;padding:20px clamp(20px,3vw,42px) 24px;align-self:start}
.secondary-back{max-width:1160px;margin:0 auto 16px;gap:10px 14px}.secondary-back .saga-previous-page,.secondary-back #pays-return{margin:0!important;font:650 16px/1.3 system-ui;min-height:0;padding:8px 12px;max-width:100%}
.secondary-heading{margin:0 auto 22px;padding:0 0 18px;border-bottom:1px solid #65716f;max-width:1160px}.secondary-heading h1{font-size:38px;margin:0 0 9px}.secondary-heading p{margin:7px auto}.secondary-content{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;max-width:1160px;margin:auto;align-items:start}.secondary-history{max-width:none;margin:0}.secondary-history h2{margin:0 0 14px}.secondary-history p{font-size:19px;line-height:1.65;margin:0 0 18px}.secondary-history p:last-child{margin-bottom:0}.secondary-images{grid-template-columns:1fr;gap:20px;margin:0;max-width:none}.secondary-image{height:175px;padding:10px}.secondary-images img{max-height:155px}.secondary-images figcaption{font-size:16px;padding-top:8px}.secondary-images figcaption strong{font-size:17px}.secondary-sources{max-width:1160px;margin-top:22px}
@media(max-width:1250px){.secondary-content{grid-template-columns:minmax(0,1fr) 260px;gap:24px}.secondary-history p{font-size:18px;line-height:1.58}}
@media(max-width:1050px){.secondary-content{grid-template-columns:1fr}.secondary-images{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.secondary-heading h1{font-size:32px}}
@media(max-width:620px){.secondary-images{grid-template-columns:1fr}.secondary-company{padding:18px}.secondary-back{gap:8px}.secondary-back a,.secondary-back .saga-previous-page{font-size:15px!important}.secondary-history p{font-size:17px}}
@media print{.secondary-content{grid-template-columns:minmax(0,1fr) 220px;gap:24px}.secondary-back{display:none!important}.secondary-company{background:#fff;color:#000}}

.zoom-links{margin-top:22px;padding-top:18px;border-top:1px solid #65716f}.zoom-links h2{font:650 22px Georgia,serif;color:#f2cf6e;margin:0 0 12px}.zoom-links nav{display:flex;flex-wrap:wrap;gap:10px}.zoom-links a{padding:9px 12px;border:1px solid #8c804f;border-radius:5px;color:#f2cf6e;text-decoration:none;font:650 16px/1.4 system-ui}.zoom-links a:hover,.zoom-links a:focus-visible{outline:2px solid #f2cf6e;outline-offset:2px}.zoom-links p{font:14px/1.5 system-ui;color:#c4ccce}
.secondary-images .secondary-image{height:220px;padding:10px;background:#fff}.secondary-images .secondary-image img{width:100%;height:100%;max-width:100%;max-height:200px;object-fit:contain}@media(max-width:620px){.secondary-images .secondary-image{height:240px}.secondary-images .secondary-image img{max-height:220px}}
.secondary-images figcaption a,.secondary-images figcaption a:visited{display:inline;color:#f2cf6e;text-underline-offset:3px}.secondary-images figcaption a:hover{color:#fff0b5}
.secondary-meta{font-size:16px;line-height:1.5}.secondary-images figcaption a{display:inline;color:#f2cf6e}.secondary-images figcaption small{overflow-wrap:anywhere}