:root{--navy:#203f54;--cream:#eee4d2;--ink:#213f52;--muted:#5a6a70;--line:#203f5433}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid #ab6538;outline-offset:5px}.skip{position:absolute;top:-80px;background:var(--cream);padding:12px;z-index:10}.skip:focus{top:0}.topline{text-align:center;background:var(--navy);color:var(--cream);font-size:12px;letter-spacing:.16em;padding:10px 16px}header{padding:23px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{font-family:Georgia,serif;font-size:43px;font-weight:bold;font-style:italic;line-height:1;letter-spacing:-2px}.brand span{display:block;font:9px Arial,sans-serif;letter-spacing:1.6px;margin-top:9px}nav{display:flex;gap:32px;align-items:center;font-size:14px}nav a:hover{text-decoration:underline}.nav-cta{border:1px solid var(--ink);padding:10px 20px;border-radius:2px}.hero{display:grid;grid-template-columns:1.1fr 1fr;min-height:660px}.hero-copy{padding:72px 7% 30px 9%;display:flex;align-items:flex-start;flex-direction:column;justify-content:center}.eyebrow{font-size:12px;letter-spacing:.15em;font-weight:bold;margin:0 0 24px}h1{font-family:Georgia,serif;letter-spacing:-.06em;font-weight:400;font-size:clamp(60px,6.5vw,104px);line-height:1.02;margin:0 0 28px}h1 em{font-weight:400}p.intro{font-size:17px;line-height:1.7;margin:0 0 30px;max-width:440px}.button{display:inline-block;background:var(--navy);color:var(--cream);padding:16px 25px;font-size:14px;transition:background .2s}.button:hover{background:#315d77}.hero-note{margin-top:58px;font-size:12px;letter-spacing:.03em}.hero-note span{margin-right:20px}.hero-art{position:relative;background:var(--navy);overflow:hidden;max-height:760px}.hero-art>img{width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block}.art-caption{position:absolute;bottom:20px;left:0;width:100%;text-align:center;color:var(--cream);background:var(--navy);padding:9px;font-size:11px;letter-spacing:.12em}.ribbon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-around;align-items:center;padding:20px 5%;font-size:12px;letter-spacing:.15em;gap:20px}.ribbon b{font-size:24px;font-weight:normal}.shop{padding:80px 5% 90px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:38px}.section-head .eyebrow{margin-bottom:12px}h2{font:400 clamp(36px,4vw,56px)/1.1 Georgia,serif;letter-spacing:-.04em;margin:0}.section-head>p{font-size:14px;margin:0;line-height:1.6}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.product{min-width:0;scroll-margin-top:24px}.product-image{height:350px;position:relative;overflow:hidden;background:#e0d8c7}.coffee{display:flex;justify-content:center;align-items:center}.coffee img{height:82%;width:auto;box-shadow:10px 14px 22px #203f5425;transform:rotate(-5deg)}.badge{position:absolute;left:16px;top:16px;font-size:10px;letter-spacing:.08em;background:var(--cream);padding:7px 9px;z-index:1}.merch img{height:100%;width:200%;max-width:none;object-fit:cover;display:block}.cap img{transform:translateX(-50%)}.concept{position:absolute;bottom:12px;right:12px;font-size:9px;letter-spacing:.08em;background:var(--cream);padding:4px 7px}.product-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em;margin-top:20px}.product h3{font:400 29px/1.2 Georgia,serif;letter-spacing:-.03em;margin:12px 0}.product>p{font-size:14px;line-height:1.65;max-width:350px;min-height:70px;margin:0 0 22px}.purchase{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:12px}.availability{font-size:14px;color:var(--muted)}.price{font-size:18px}.buy{width:100%;text-align:center}.story{display:grid;grid-template-columns:1fr 1fr;background:var(--navy);color:var(--cream)}.story-image{overflow:hidden;min-height:460px}.story-image img{width:100%;height:100%;object-fit:cover}.story-copy{padding:65px 12%}.story-copy h2{margin-bottom:26px}.story-copy>p:not(.eyebrow){font-size:16px;line-height:1.8;max-width:440px}.signature{display:block;font:italic 23px Georgia,serif;margin-top:30px}footer{padding:48px 5%;display:flex;align-items:center;justify-content:space-between;gap:30px}footer p{font-size:14px}footer small{font-size:12px;color:var(--muted)}footer>a:last-child{font-size:13px;border-bottom:1px solid var(--ink)}@media(min-width:1500px){body{max-width:1800px;margin:auto}.hero-art{max-height:850px}}@media(max-width:900px){.hero{min-height:560px}.hero-copy{padding:50px 8%}h1{font-size:64px}.hero-note{margin-top:35px}.products{gap:18px}.product-image{height:280px}.product h3{font-size:24px}.story-copy{padding:45px 8%}.story-copy h2{font-size:38px}}@media(max-width:640px){header{padding:20px 6%}.brand{font-size:35px}.brand span{font-size:8px}nav{gap:20px;font-size:13px}.nav-cta{display:none}.topline{font-size:9px;letter-spacing:.09em}.hero{grid-template-columns:1fr}.hero-copy{padding:48px 6% 35px}h1{font-size:64px}.hero-copy .eyebrow{font-size:10px}p.intro{font-size:16px}.hero-art{height:410px}.hero-art>img{object-position:center 49%}.hero-note{margin-top:30px}.ribbon{padding:16px 5%;font-size:9px;gap:12px;letter-spacing:.05em}.ribbon b{font-size:16px}.shop{padding:50px 6%}.section-head{align-items:start}.section-head>p{display:none}.section-head h2{font-size:37px}.products{grid-template-columns:1fr;gap:42px}.product-image{height:390px}.product h3{font-size:30px}.product>p{min-height:0;max-width:none;font-size:16px}.product-meta{font-size:11px}.story{grid-template-columns:1fr}.story-image{min-height:0;height:300px}.story-copy{padding:45px 6%}.story-copy h2{font-size:42px}footer{flex-wrap:wrap;padding:38px 6%}footer>a:last-child{width:fit-content}.eyebrow{font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Direction Spirale : logo original, encre marine et papier blanc. */
:root{--navy:#0c3045;--cream:#fff;--ink:#0c3045;--muted:#526570;--line:#0c30452b}body{background:#fff}header{padding:16px 5%}.brand{display:flex;flex-direction:column;align-items:center;font-style:normal;letter-spacing:0}.brand img{width:106px;height:88px;object-fit:contain}.brand span{font-size:8px;letter-spacing:1.1px;margin-top:3px}nav{font-weight:600}.nav-cta{background:var(--navy);color:white;border-radius:0;padding:12px 23px}.hero{grid-template-columns:1fr 1fr;min-height:710px;max-width:1550px;margin:auto}.hero-copy{padding:50px 5% 40px 10%}.hero-copy .eyebrow{font-size:11px;letter-spacing:.17em}h1{font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:clamp(65px,7.4vw,114px);letter-spacing:-.075em;line-height:.94;margin-bottom:32px}h1 em{font-style:normal;font-weight:900}.intro{max-width:420px!important}.hero-art{background:#fff;padding:26px 6% 26px 0;max-height:none;display:flex;align-items:center;justify-content:center}.hero-art>img{height:690px;width:100%;object-fit:contain;object-position:center}.hero-note{font-size:11px;line-height:1.9;margin-top:35px}.hero-note span{font-size:10px;font-weight:bold;letter-spacing:.12em}.button{font-weight:600;padding:17px 28px}.ribbon{background:var(--navy);color:white;border:0}.shop{padding-top:74px}.section-head .eyebrow{font-size:10px}h2{font-family:Arial,Helvetica,sans-serif;font-weight:800;letter-spacing:-.055em}.section-head>p{font-size:14px}.product-image{background:#f3f5f5;border:1px solid #e5ebee;height:365px}.coffee img{transform:rotate(-4deg);height:83%}.shirt{background:#fff;display:flex;align-items:center}.print-pair{display:flex;align-items:center;justify-content:center;gap:10%;padding:40px 7%;width:100%;height:100%}.print-pair img:first-child{width:36%;height:auto;object-fit:contain}.print-pair img:last-child{width:46%;height:90%;object-fit:contain}.cap{display:flex;align-items:center;justify-content:center;background:var(--navy)}.cap>img{width:65%;height:auto;transform:none;filter:brightness(0) invert(1)}.concept{background:#fff;color:var(--navy);font-size:9px}.badge{background:white;color:var(--navy)}.product h3{font-family:Arial,Helvetica,sans-serif;font-weight:750;font-size:27px;letter-spacing:-.04em}.story{grid-template-columns:.85fr 1.15fr}.story-image{min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px;border-right:1px solid #ffffff35}.story-image img{width:220px;height:auto;object-fit:contain;filter:brightness(0) invert(1)}.story-image p{text-align:center;font-size:12px;font-weight:bold;letter-spacing:.17em;margin:22px 0 0}.story-copy{padding:65px 10%}.story-copy h2{font-size:52px}.signature{font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:18px;font-weight:bold}footer .brand img{width:100px;height:84px}footer{padding-top:32px;padding-bottom:32px}@media(max-width:900px){.hero{min-height:600px}.hero-copy{padding-left:10%}h1{font-size:76px}.hero-art>img{height:580px}.product-image{height:280px}.product h3{font-size:23px}.story-copy h2{font-size:40px}}@media(max-width:640px){header{padding:12px 6%}.brand img{width:76px;height:63px}.brand span{font-size:6px;letter-spacing:.8px}nav{gap:20px}.hero{grid-template-columns:1fr}.hero-copy{padding:45px 6% 30px}h1{font-size:clamp(64px,17vw,100px);line-height:.94}.hero-art{padding:5px 8% 32px;height:auto}.hero-art>img{height:auto;max-height:640px;max-width:400px;object-fit:contain}.hero-note{margin-top:26px}.ribbon{font-size:8px;letter-spacing:.03em;gap:10px}.shop{padding-top:48px}.section-head h2{font-size:36px}.product-image{height:380px}.product h3{font-size:29px}.story{grid-template-columns:1fr}.story-image{min-height:320px;height:auto;border-right:0;border-bottom:1px solid #ffffff35;padding:35px}.story-image img{width:190px}.story-copy{padding:42px 6%}.story-copy h2{font-size:42px}footer .brand img{width:85px;height:70px}}
.brand span{font-size:9px;letter-spacing:.6px}@media(max-width:640px){.brand span{font-size:9px;letter-spacing:0;max-width:110px;text-align:center;line-height:1.3}nav{gap:16px}}
/* Palette et photographie de référence : sacs Spirale, octobre 2026. */
:root{--navy:#234258;--cream:#eee3d2;--ink:#234258;--muted:#596872;--line:#23425830}
body{background:var(--cream)}
header{background:var(--cream)}
.topline,.ribbon,.story{color:var(--cream)}
.nav-cta{color:var(--cream)}
.hero{grid-template-columns:.9fr 1.15fr;min-height:640px;max-width:none;background:var(--cream)}
.hero-copy{padding:55px 6% 45px 11%}
h1{font-size:clamp(64px,6.8vw,104px)}
.hero-art{padding:0;background:#d9cdbf;overflow:hidden}
.hero-art>img{display:block;width:100%;height:100%;max-height:none;object-fit:contain}
.hero-copy .button:hover,.buy:hover{background:#365970}
.shop{background:var(--cream)}
.product-image{background:#e1d5c5;border-color:#2342581a}
.coffee img{width:100%;height:100%;object-fit:contain;transform:none;box-shadow:none}
.badge,.concept{background:var(--cream);color:var(--navy)}
.shirt{background:#f3eadc}
.print-pair img{mix-blend-mode:multiply}
.cap{background:var(--navy)}
.cap>img,.story-image img{filter:brightness(0) saturate(100%) invert(94%) sepia(14%) saturate(298%) hue-rotate(340deg) brightness(97%) contrast(91%)}
.story-image{border-color:#eee3d235}
footer{background:#e5d8c5}
@media(max-width:900px){.hero{min-height:580px}.hero-copy{padding-left:9%}h1{font-size:66px}.hero-art>img{height:100%}}
@media(max-width:640px){.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:43px 6% 34px}h1{font-size:clamp(64px,17vw,100px)}.hero-art{padding:0;height:auto}.hero-art>img{width:100%;height:auto;max-width:none;max-height:none}.product-image.coffee{height:auto;aspect-ratio:1351/1164}.story-image{border-color:#eee3d235}}

/* Collection fournie : cadrages CSS, image originale préservée. */
.product-image.merch{background:#d3d0ca;display:flex;align-items:center;justify-content:center}
.merch-photo{position:relative;width:100%;overflow:hidden;flex:none}
.merch-photo img{position:absolute;left:0;width:100%;height:auto;max-width:none;transform:none;filter:none;mix-blend-mode:normal;display:block}
.tshirts-photo{aspect-ratio:1536/600}.tshirts-photo img{top:0}
.caps-photo{aspect-ratio:1536/424}.caps-photo img{bottom:0}

/* Les quatre pictogrammes proviennent directement du visuel du sac. */
.ribbon.bag-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:28px 5%;background:var(--cream);color:var(--navy);border-top:1px solid var(--line);border-bottom:1px solid var(--line);letter-spacing:.04em}
.bag-value{display:flex;align-items:center;justify-content:center;gap:15px;font-size:13px;line-height:1.45;font-weight:700}
.bag-icon{position:relative;display:block;width:72px;aspect-ratio:1;overflow:hidden;flex:none;mix-blend-mode:multiply}
.bag-icon img{position:absolute;width:612.941177%;max-width:none;height:auto;top:-4.705883%;display:block}
.bag-icon.mountain img{left:-14.705883%}.bag-icon.leaf img{left:-175.294118%}.bag-icon.compass img{left:-340%}.bag-icon.cup img{left:-501.176471%}
@media(max-width:1000px){.bag-value{flex-direction:column;text-align:center;gap:10px}}
@media(max-width:640px){.ribbon.bag-values{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;padding:28px 6%}.bag-value{font-size:12px}.bag-icon{width:70px}}
/* Pictogrammes compacts, sans fond visible autour du tracé. */
.ribbon.bag-values{gap:20px;padding:20px 5%}
.bag-value{flex-direction:row;text-align:left;gap:12px;font-size:12px}
.bag-icon{width:24px;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.6)}
@media(max-width:1000px){.bag-value{flex-direction:row;text-align:left;font-size:11px}}
@media(max-width:640px){.ribbon.bag-values{padding:20px 6%;gap:20px 14px}.bag-value{font-size:11px;gap:10px}.bag-icon{width:24px}}
/* Signature typographique inspirée de celle imprimée sur le sac. */
.brand span{display:block;max-width:none;margin-top:7px;font-family:Arial,Helvetica,sans-serif;font-size:10px;font-weight:800;font-style:normal;line-height:1.25;letter-spacing:.045em;white-space:nowrap;text-align:center;color:var(--navy)}
.brand span::after{content:"";display:block;width:25px;height:2px;margin:8px auto 0;background:currentColor}
@media(max-width:640px){.brand span{font-size:9px;letter-spacing:.025em;margin-top:6px}.brand span::after{width:22px;margin-top:6px}nav{gap:12px}}
@media(max-width:360px){header nav{font-size:11px;gap:10px}}

/* Encre marine et alpha transparent : aucun aplat blanc derrière les icônes. */
.icon-filter-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.bag-icon{filter:none;mix-blend-mode:normal;background:transparent}
.bag-icon img{filter:url(#bag-icon-ink);mix-blend-mode:normal}