/* Customcup — base légère : polices système, assets locaux, aucune animation. */
:root{--ink:#203c32;--ink-dark:#152e25;--muted:#667067;--paper:#faf9f5;--white:#fff;--highlight:#d2ed79;--art-alt:#dcd6eb;--line:#dfe3da;--soft:#eef1e9;--radius:14px;font-family:"Avenir Next",Avenir,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0}h1,h2,h3,p,figure{margin:0}button,input,select{font:inherit}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:5px}::selection{background:var(--highlight);color:var(--ink)}[hidden]{display:none!important}
.wrap{width:min(1280px,calc(100% - 40px));margin-inline:auto}.section-space{padding-block:64px}section[id]{scroll-margin-top:90px}.skip-link{position:absolute;top:-100px;left:12px;z-index:20;padding:15px;background:var(--ink);color:#fff}.skip-link:focus{top:12px}
.announcement{padding:9px 20px;background:var(--ink);color:#fff;font-size:11px;line-height:1.5;display:flex;justify-content:center;gap:8px 24px;flex-wrap:wrap}.announcement strong{color:var(--highlight)}.site-header{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}.brand{font-size:29px;line-height:1;font-weight:800;letter-spacing:-1.8px;white-space:nowrap}.brand span{color:var(--action);display:inline-block;font-size:24px;margin-left:2px;vertical-align:top}.header-inner nav{display:none;align-items:center;gap:28px;font-size:13px;font-weight:500}.header-inner nav a{display:flex;align-items:center;min-height:44px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:48px;background:var(--action);color:var(--on-action);border:1px solid var(--action);padding:14px 20px;border-radius:7px;font-size:14px;font-weight:650;line-height:1.3}.button span{font-size:22px;font-weight:400}.button:hover{background:var(--action-hover)}.button-small{min-height:42px;padding:10px 14px;font-size:12px;gap:16px}.button-small span{font-size:17px}.button-large{min-height:56px;padding:17px 22px}.eyebrow{text-transform:uppercase;font-size:10px;font-weight:650;letter-spacing:1.6px;line-height:1.65;margin-bottom:17px}.dot{display:inline-block;width:7px;height:7px;background:var(--action);border-radius:50%;margin-right:7px;flex-shrink:0}.serif{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-1.8px}
h1{font-size:clamp(40px,10.5vw,58px);font-weight:700;line-height:1.04;letter-spacing:-2.7px}h2{font-size:36px;line-height:1.12;letter-spacing:-1.6px;font-weight:650}h3{font-size:18px;line-height:1.35;font-weight:650;letter-spacing:-.45px}p{line-height:1.65}.hero{display:grid;gap:34px;padding-block:38px 34px}.hero .eyebrow{font-size:9px;letter-spacing:1.2px}h1>span{display:inline-block;position:relative;isolation:isolate}h1>span:after{content:"";position:absolute;left:0;right:0;bottom:1px;height:24%;background:var(--highlight);z-index:-1}.hero-lead{font-size:18px;margin-top:23px;letter-spacing:-.35px}.hero-description{max-width:390px;color:var(--muted);font-size:14px;margin:10px 0 24px}.hero-copy>.button{width:100%}.hero-footnote{font-size:10px;color:var(--muted);margin-top:12px}.hero-footnote span{margin-inline:5px}.offer-note{display:flex;align-items:center;gap:13px;margin-top:24px}.offer-number{background:var(--soft);border:1px solid var(--line);font-weight:700;letter-spacing:-1px;font-size:19px;border-radius:9px;padding:10px}.offer-note p{font-size:11px;line-height:1.5}.offer-note strong{font-weight:600}.hero-visual{position:relative;background:var(--art-base);border-radius:14px;overflow:hidden;min-width:0}.hero-visual img{width:100%;aspect-ratio:600/530;object-fit:cover}.visual-topline{display:flex;justify-content:space-between;align-items:center;padding:21px 22px 0;font-size:9px;letter-spacing:1.4px}.visual-topline>span:last-child{font-size:20px}.visual-sticker{position:absolute;right:17px;top:70px;font-family:Georgia,serif;font-size:16px;line-height:1.1;transform:rotate(8deg);background:#fefdf5;border-radius:50%;width:94px;height:94px;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;box-shadow:0 3px 4px #203c3210}.visual-sticker span{font-family:Arial,sans-serif;font-size:20px;margin-top:3px}.hero-visual figcaption{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:10px;padding:0 22px 19px}.hero-visual figcaption small{font-size:9px;color:var(--muted);max-width:70px;text-align:right}.reassurance{display:grid;grid-template-columns:1fr 1fr;gap:23px 18px;padding-block:26px 35px;border-top:1px solid var(--line)}.reassurance>div{display:flex;gap:12px;align-items:center}.reassurance-icon{font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.reassurance p{font-size:11px;line-height:1.5}.reassurance strong,.reassurance p>span{display:block}.reassurance p>span{color:var(--muted);font-size:10px}.section-heading{display:flex;flex-direction:column;gap:18px;margin-bottom:30px}.section-heading>p{font-size:13px;color:var(--muted);max-width:350px}.config-section{padding-block:48px;background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.config-heading .eyebrow{margin-bottom:11px}.config-shell{scroll-margin-top:100px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;overflow:clip;box-shadow:0 10px 32px #203c3208}.config-toolbar{background:#fff;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);font-size:11px;font-weight:600}.config-offer{background:var(--highlight);padding:6px 9px;border-radius:4px;font-size:10px;font-weight:600}.config-after{display:flex;flex-direction:column;gap:9px;padding-top:20px;font-size:11px;color:var(--muted)}.config-after strong{color:var(--ink)}.config-after>span{font-size:10px}.config-fallback{padding:20px}.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 16px}.product-card{min-width:0}.product-image{position:relative;border-radius:9px;overflow:hidden;margin-bottom:17px;background:#ece8df}.product-image img{width:100%;aspect-ratio:240/270;object-fit:contain}.tone-lilac{background:#e8e2f0}.tone-lime{background:var(--selected)}.tone-blue{background:#e4eaf0}.tone-peach{background:#f1e1d7}.product-index{position:absolute;top:13px;left:13px;font-size:10px;color:var(--muted)}.product-badge{position:absolute;top:12px;left:12px;border-radius:3px;background:var(--ink);color:#fff;font-size:9px;font-weight:600;padding:5px 7px}.product-heading{display:flex;gap:8px;justify-content:space-between;align-items:baseline;flex-wrap:wrap}.product-heading h3{font-size:15px}.product-heading>span{font-size:12px;color:var(--muted)}.product-card>p{font-size:11px;color:var(--muted);margin-top:5px}.product-card>a{border-bottom:1px solid var(--line);margin-top:14px;padding-block:8px;display:flex;justify-content:space-between;gap:8px;align-items:center;min-height:44px;font-size:11px;font-weight:600}.product-card>a:hover{color:var(--action)}.section-note{font-size:10px;color:var(--muted);margin-top:25px}.process{background:var(--ink);color:#fff}.process .eyebrow{color:var(--highlight)}.process .section-heading>p{color:var(--inverse-muted)}.process-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 22px;padding:0;margin:36px 0 0;list-style:none}.step-number{display:block;font-family:Georgia,serif;font-style:italic;font-size:39px;color:var(--highlight);line-height:1;padding-bottom:22px;border-bottom:1px solid var(--inverse-line);margin-bottom:20px}.process-grid h3{font-size:16px}.process-grid p{font-size:12px;color:var(--inverse-muted);margin-top:12px}.print-grid{display:grid;gap:25px}.print-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.print-art{height:290px;position:relative;padding:22px 26px;overflow:hidden}.print-art-label{font-size:9px;letter-spacing:1.5px;position:relative;z-index:1}.print-art small{position:absolute;bottom:18px;left:26px;font-size:9px}.screenprint{background:var(--art-alt)}.poster-type{position:relative;font-weight:850;font-size:40px;line-height:.93;letter-spacing:-2px;margin-top:35px;max-width:270px}.poster-type>span:not(.poster-flower){font-family:Georgia,serif;font-style:italic;font-weight:400}.poster-flower{position:absolute;right:-7px;bottom:-10px;font-size:90px;color:var(--action);font-weight:400}.photoprint{background:#f0c6b4;color:#302841}.photo-disc{position:absolute;width:300px;height:300px;background:linear-gradient(35deg,#e74e36,#f6a762 38%,#eeacc3 64%,#9795cc 85%);border-radius:50%;right:-25px;top:30px}.photo-type{position:relative;font-size:62px;line-height:.85;font-weight:750;letter-spacing:-3px;margin-top:32px;z-index:1}.photo-type span{font-family:Georgia,serif;font-style:italic;font-weight:400;font-size:70px}.print-content{padding:25px}.tag{display:inline-block;font-size:9px;letter-spacing:.7px;text-transform:uppercase;padding:6px 9px;border-radius:3px;background:var(--soft);margin-bottom:14px}.print-content h3{font-size:21px}.print-content p{font-size:13px;color:var(--muted);margin-block:13px 18px;max-width:450px}.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px;font-size:12px;font-weight:600}.text-link>span{font-size:19px}.text-link:hover{text-decoration:underline}.studio-note{margin-top:28px;background:var(--soft);border-radius:10px;padding:22px;display:flex;align-items:start;gap:16px;flex-wrap:wrap}.studio-symbol{font-size:36px;line-height:1;flex-shrink:0}.studio-note>div{flex:1;min-width:190px}.studio-note h3{font-size:15px}.studio-note p{font-size:12px;color:var(--muted);margin-top:6px}.occasions{background:var(--art-base)}.occasion-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px}.occasion{border-radius:9px;overflow:hidden;background:var(--paper)}.occasion-art{height:180px;position:relative;overflow:hidden;padding:21px 16px;background:var(--art-pop);display:flex;align-items:center}.event-word{font-size:23px;line-height:1;letter-spacing:-1px;font-weight:800;position:relative;z-index:1}.event-ticket{position:absolute;bottom:19px;left:12px;right:12px;background:var(--ink);color:#fff;transform:rotate(-6deg);font-size:7px;padding:9px;letter-spacing:1px;text-align:center}.occasion-copy{padding:17px 15px 22px}.occasion-copy>span{font-size:8px;letter-spacing:.6px}.occasion-copy h3{font-size:16px;margin-top:13px}.occasion-copy p{font-size:11px;color:var(--muted);margin-top:9px}.occasion-live .occasion-art{background:#d8cff0}.occasion-live .event-word{font-size:38px}.event-flower{position:absolute;right:-14px;bottom:13px;font-size:105px;line-height:1;color:var(--highlight)}.occasion-team .occasion-art{background:var(--art-alt)}.occasion-team .event-ticket{background:var(--ink);color:#fff;transform:rotate(6deg)}.occasion-party .occasion-art{background:#f0d7c9;justify-content:center}.event-script{font-family:Georgia,serif;font-style:italic;font-size:38px;line-height:1;letter-spacing:-2px;transform:rotate(-8deg)}.trust{display:grid;gap:35px}.trust-intro>p:last-child{font-size:13px;color:var(--muted);max-width:280px;margin-top:22px}.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 22px}.trust-grid article>span{display:flex;width:32px;height:32px;justify-content:center;align-items:center;background:var(--soft);border-radius:50%;margin-bottom:16px}.trust-grid h3{font-size:15px}.trust-grid p{font-size:12px;color:var(--muted);margin-top:8px}.faq{border-top:1px solid var(--line);background:var(--soft)}.faq-layout{display:grid;gap:30px}.faq-intro{font-size:13px;color:var(--muted);margin-top:20px}.faq-list article{padding-block:22px;border-bottom:1px solid var(--line)}.faq-list article:first-child{padding-top:0}.faq-list h3{font-size:15px}.faq-list p{font-size:12px;color:var(--muted);margin-top:10px;max-width:610px}.final-cta{background:var(--highlight);padding-block:48px}.final-inner{display:flex;flex-direction:column;gap:30px}.final-inner h2{font-size:34px}.final-inner>div:last-child{max-width:400px}.final-inner .button{width:100%}.final-inner>div:last-child p{font-size:10px;text-align:center;margin-top:12px}.site-footer{padding-block:30px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.site-footer p{color:var(--muted);font-size:11px}.site-footer>a:last-child{font-size:11px;min-height:44px;display:flex;align-items:center}.mobile-break{display:none}
@media(min-width:700px){.wrap{width:min(1280px,calc(100% - 72px))}.section-space{padding-block:86px}.header-inner nav{display:flex;gap:20px}.hero{grid-template-columns:1.03fr 1fr;align-items:center;gap:30px;padding-block:52px}.hero .eyebrow{font-size:9px}h1{font-size:clamp(40px,5.1vw,73px);letter-spacing:-3px}.hero-copy>.button{width:auto}.hero-lead{font-size:18px}.hero-visual figcaption{font-size:10px}.reassurance{grid-template-columns:repeat(4,1fr);gap:15px;padding-block:28px 35px}.reassurance>div{gap:9px}.reassurance-icon{width:25px;height:25px}.reassurance p{font-size:11px}.reassurance p>span{font-size:10px}.section-heading{flex-direction:row;justify-content:space-between;align-items:end;gap:35px;margin-bottom:38px}h2{font-size:45px}.section-heading>p{font-size:13px;max-width:290px}.config-section{padding-block:64px}.config-heading h2{font-size:43px}.config-toolbar{padding:16px 25px;font-size:12px}.config-offer{font-size:11px}.config-after{flex-direction:row;justify-content:space-between;align-items:center;gap:25px}.product-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:17px}.product-heading h3{font-size:15px}.product-heading{gap:3px}.product-card>p{min-height:37px;font-size:11px}.product-card>a{font-size:10px}.process-grid{grid-template-columns:repeat(4,1fr);gap:28px}.process-grid h3{font-size:17px}.process-grid p{font-size:13px}.print-grid{grid-template-columns:1fr 1fr;gap:24px}.print-art{height:310px}.poster-type{font-size:48px}.photo-type{font-size:69px}.print-content{padding:30px}.studio-note{align-items:center;padding:25px 30px;gap:24px}.occasion-grid{grid-template-columns:repeat(4,1fr);gap:18px}.occasion-art{height:210px}.occasion-copy h3{font-size:17px}.occasion-copy p{font-size:11px}.occasion-copy{padding:21px 17px 25px}.event-word{font-size:26px}.event-script{font-size:42px}.event-ticket{font-size:7px}.trust{grid-template-columns:.8fr 1.2fr;gap:80px}.trust-grid{gap:36px}.faq-layout{grid-template-columns:.8fr 1.2fr;gap:80px}.faq-list h3{font-size:16px}.faq-list p{font-size:13px}.final-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:35px}.final-inner h2{font-size:40px}.final-cta{padding-block:60px}.site-footer p{margin-right:auto}.site-footer{padding-block:35px}}
@media(min-width:1000px){.header-inner{height:88px}.header-inner nav{gap:30px}.brand{font-size:33px}.hero{gap:66px;padding-block:60px}.hero .eyebrow{font-size:10px}.hero-lead{font-size:21px}.hero-description{font-size:15px;max-width:410px}.hero-footnote{font-size:11px}.offer-note{margin-top:28px}.offer-note p{font-size:12px}.hero-visual{border-radius:18px}.visual-topline{padding:26px 30px 0;font-size:10px}.hero-visual figcaption{padding:0 30px 23px;font-size:11px}.visual-sticker{right:25px;top:95px;width:112px;height:112px;font-size:20px}.visual-sticker span{font-size:25px}.reassurance{gap:30px}.reassurance-icon{width:34px;height:34px;font-size:11px}.reassurance>div{gap:14px}.reassurance p{font-size:13px}.reassurance p>span{font-size:11px}.product-heading h3{font-size:17px}.product-card>a{font-size:12px}.product-card>p{min-height:0;font-size:12px}.event-word{font-size:32px}.occasion-art{height:250px;padding:25px}.occasion-live .event-word{font-size:50px}.event-script{font-size:53px}.event-ticket{font-size:9px;bottom:27px}.occasion-copy{padding:24px}.occasion-copy h3{font-size:19px}.occasion-copy>span{font-size:9px}.occasion-copy p{font-size:12px}.final-inner h2{font-size:47px}.section-heading>p{font-size:14px}}

@media(max-width:370px){.wrap{width:calc(100% - 30px)}.brand{font-size:26px}.header-inner{gap:12px}.button-small{font-size:10px;gap:10px;padding:10px}.hero h1{font-size:39px;letter-spacing:-2.4px}.hero .eyebrow{font-size:8px}.hero-lead{font-size:17px}.hero-footnote{font-size:9px}.reassurance>div{gap:7px}.reassurance-icon{width:23px;height:23px}.reassurance p{font-size:10px}.reassurance p>span{font-size:9px}.mobile-break{display:block}.config-heading h2{font-size:32px}.product-heading h3{font-size:14px}.product-card>a{font-size:10px}.event-word{font-size:21px}.occasion-copy h3{font-size:15px}.final-inner h2{font-size:30px}}
@media print{.site-header{position:static}.ccfg,.config-toolbar{display:none}.config-after:before{content:"Configurateur interactif disponible sur customcup.eu"}.button{background:transparent;color:#203c32}.hero{break-inside:avoid}.section-space{padding-block:30px}}

/* Parcours d'arrivée : promesse explicite, hauteur maîtrisée et une seule action principale. */
.announcement strong{color:#fff}.hero{padding-block:32px 26px;gap:24px}.hero .eyebrow{font-size:10px;letter-spacing:1px}.hero h1{font-size:clamp(38px,10.8vw,56px);line-height:1.02;letter-spacing:-2.2px}.hero h1>span{color:var(--action)}.hero h1>span:after{height:18%;bottom:1px}.hero-lead{font-size:17px;margin-top:20px}.hero-description{font-size:13px;line-height:1.6;margin:10px 0 20px;max-width:400px}.hero-footnote{font-size:10px}.offer-note{margin-top:18px;gap:11px}.offer-number{padding:8px 10px;background:var(--highlight);border-color:var(--highlight);color:var(--on-highlight)}.offer-note p{font-size:11px}.config-offer{color:var(--on-highlight)}.header-inner{height:66px}.header-inner nav{font-size:12px}.config-section{padding-block:32px 38px}.config-heading{margin-bottom:22px;gap:12px}.config-heading h2{font-size:34px}.config-heading .eyebrow{font-size:10px;margin-bottom:8px}.config-heading>p{font-size:12px}.config-after{font-size:11px}.reassurance{padding-block:22px;gap:18px 14px}.reassurance-icon{color:var(--action);border-color:var(--line)}.final-cta .button{background:var(--action);color:var(--on-action)}.config-shell{scroll-margin-top:78px}.ccfg .panneau{scroll-margin-top:79px}.product-card>a{color:var(--action)}
.mobile-conversion{position:fixed;bottom:0;left:0;right:0;z-index:11;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line);box-shadow:0 -3px 15px #00000008}.mobile-conversion strong,.mobile-conversion>div>span{display:block;font-size:11px;line-height:1.5}.mobile-conversion>div>span{font-size:10px;color:var(--muted)}.mobile-conversion .button{font-size:12px;min-height:46px;padding:12px 15px;gap:16px}.has-mobile-conversion{padding-bottom:83px}
@media(max-width:699px){.hero-visual{height:160px;min-height:0;border-radius:10px}.hero-visual img{position:absolute;width:205px;max-width:none;height:182px;right:-4px;bottom:-9px;object-fit:contain}.visual-topline{padding:20px 15px 0;max-width:150px;font-size:8px;line-height:1.5;gap:7px}.visual-topline>span:last-child{display:none}.visual-sticker{display:none}.hero-visual figcaption{position:absolute;left:15px;top:61px;bottom:auto;padding:0;max-width:125px;display:block;font-size:12px;line-height:1.45}.hero-visual figcaption small{display:block;text-align:left;max-width:none;margin-top:12px;font-size:8px}.hero-footnote span{margin-inline:2px}.hero-copy>.button{font-size:13px}.reassurance-icon{display:none}.reassurance p{font-size:11px}.reassurance p>span{font-size:10px}.config-toolbar{padding:12px 15px}.announcement{font-size:10px;gap:4px 14px}}
@media(min-width:700px){.hero{padding-block:38px 32px;gap:36px}.hero h1{font-size:clamp(40px,5vw,68px);letter-spacing:-2.5px}.hero .eyebrow{font-size:9px}.hero-lead{font-size:18px}.hero-description{font-size:13px}.hero-visual img{max-height:370px;object-fit:contain}.hero-visual figcaption{padding-bottom:18px}.visual-topline{padding-top:20px}.visual-sticker{top:74px;width:94px;height:94px;font-size:17px}.header-inner{height:76px}.reassurance{padding-block:24px}.config-section{padding-block:42px}.config-heading h2{font-size:40px}.config-heading{margin-bottom:28px}.config-heading>p{font-size:13px}.config-shell{scroll-margin-top:88px}.ccfg .panneau{scroll-margin-top:89px}.mobile-conversion{display:none}.has-mobile-conversion{padding-bottom:0}}
@media(min-width:1100px){.hero{grid-template-columns:1.07fr 1fr;gap:65px}.hero h1{font-size:68px}.hero .eyebrow{font-size:10px}.hero-lead{font-size:20px}.hero-visual img{max-height:390px}.visual-sticker{right:30px;top:74px}.hero-description{font-size:14px}.hero-footnote{font-size:11px}.offer-note p{font-size:12px}.reassurance p{font-size:12px}}
@media(max-width:370px){.hero h1{font-size:37px;letter-spacing:-1.9px}.hero .eyebrow{font-size:9px}.hero-description{font-size:12px}.hero-footnote{font-size:9px}.hero-visual img{width:185px;right:-7px}.hero-visual figcaption{max-width:112px;font-size:11px}.visual-topline{max-width:130px}.mobile-conversion{gap:9px;padding-inline:12px}.mobile-conversion strong{font-size:10px}.mobile-conversion .button{padding:12px;font-size:11px;gap:10px}}
@media print{.mobile-conversion{display:none!important}.has-mobile-conversion{padding-bottom:0}}

/* Photos générées pour les emplacements data-image-slot (voir BRIEF-VISUELS.md). */
.hero-visual img.photo{object-fit:cover}
.occasion-art{padding:0}
.occasion-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.print-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.print-art .print-art-label,.print-art small{background:rgba(255,255,255,.88);color:var(--ink);padding:5px 8px;border-radius:4px}
.print-art small{z-index:1}
/* Étape 2, mobile : overflow:clip (plus haut, sur .config-shell) garde les coins arrondis sans créer de zone de
   défilement, ce qui laisse l'aperçu 3D et la barre de prix du configurateur coller à la fenêtre.
   --cc-entete : hauteur de l'en-tête collant (bordure comprise), sous lequel l'aperçu se colle. */
:root{--cc-entete:67px}
@media(min-width:700px){:root{--cc-entete:77px}}
/* Étape 6 : dépôt du logo dans le hero (accueil-depot.js). La zone est l'action la plus visible du hero ;
   « Personnaliser mon gobelet » reste, en bouton secondaire. Texte tactile : même requête que l'aperçu 3D (ux.js).
   Sans JavaScript, la zone est masquée (le bouton suffit). */
.hero-depot{max-width:470px}
.hero-depot-zone{position:relative;display:flex;align-items:center;gap:14px;min-height:84px;padding:15px 16px;border:1.5px dashed var(--selected-line);border-radius:12px;background:var(--white);color:var(--ink);cursor:pointer;box-shadow:0 8px 24px #2029440d}
.hero-depot-zone:hover{background:var(--selected);border-color:var(--action)}
.hero-depot-zone.est-survole{background:var(--selected);border-style:solid;border-color:var(--action);box-shadow:0 0 0 4px var(--highlight)}
.hero-depot-zone input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.hero-depot-zone:focus-within{outline:3px solid var(--focus);outline-offset:4px}
@supports selector(:has(*)){.hero-depot-zone:focus-within{outline:none}.hero-depot-zone:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:4px}}
.hero-depot-symbole{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--action);color:var(--on-action);font-size:22px;line-height:1}
.hero-depot-texte{min-width:0}
.hero-depot-texte b{display:block;font-size:16px;font-weight:650;line-height:1.3;letter-spacing:-.35px}
.hero-depot-doigt{display:none}
.hero-depot-aide{display:block;margin-top:4px;font-size:11px;line-height:1.5;color:var(--muted)}
.hero-depot-etat{margin-top:10px;font-size:12px;line-height:1.5;font-weight:600}
.hero-depot-etat:empty{display:none}
.hero-depot[data-etat="erreur"] .hero-depot-zone{border-color:#b6624d}
.hero-depot[data-etat="erreur"] .hero-depot-etat{padding:9px 12px;border-radius:7px;background:#fdecea;color:#8e2a1f}
.hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:14px;max-width:470px}
.button-secondaire{background:transparent;color:var(--ink);border-color:var(--ink)}
.button-secondaire:hover{background:var(--soft)}
.hero-facultatif{font-size:11px;line-height:1.5;color:var(--muted)}
@media(hover:none) and (pointer:coarse){.hero-depot-souris{display:none}.hero-depot-doigt{display:inline}}
@media(max-width:699px){.hero-actions .button{font-size:13px}}
@media(min-width:700px){.hero-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px}.hero-facultatif{flex:1 1 170px;max-width:220px}}
@media(min-width:1000px){.hero-depot-zone{min-height:92px;padding:17px 20px;gap:16px}.hero-depot-symbole{width:48px;height:48px}.hero-depot-texte b{font-size:17px}.hero-depot-aide{font-size:12px}.hero-facultatif{font-size:12px}}
@media(max-width:370px){.hero-depot-zone{gap:11px;padding:13px}.hero-depot-symbole{width:38px;height:38px;font-size:19px}.hero-depot-texte b{font-size:15px}}
@media(scripting:none){.hero-depot{display:none}}
@media print{.hero-depot{display:none}}
/* Pleine largeur : le configurateur occupe toute la largeur de l'écran, sur ordinateur comme sur mobile.
   Plus de cadre ni de coins arrondis ; seules les lignes du haut et du bas séparent le bloc de la section. */
.config-shell{border-radius:0;border-inline:0;box-shadow:none;width:100%}
.config-toolbar{padding-inline:max(18px,calc((100% - 1280px) / 2))}
@media(min-width:700px){.config-toolbar{padding-inline:max(36px,calc((100% - 1280px) / 2))}}

/* Bande de contact sous le configurateur (contact.js), seconde version : bande bleu nuit pleine largeur, dans la
   continuité de l'introduction bleu nuit et de la barre cobalt du configurateur (Simon a jugé les cartes blanches
   sur fond gris sans rapport avec le site). Pas de cartes : trois accès en pastilles fines, rendez-vous en plein. */
/* Fond étendu jusqu'aux bords par une ombre géante coupée par clip-path : le contenu reste aligné sur .wrap et
   la page ne gagne aucun défilement horizontal (100vw compterait la barre de défilement). */
.config-after{--nuit:#172746;position:relative;display:flex;flex-direction:column;gap:22px;padding:28px 0 30px;background:var(--nuit);box-shadow:0 0 0 100vmax var(--nuit);clip-path:inset(0 -100vmax);color:#fff}
.config-after-texte{display:flex;flex-direction:column;gap:8px;max-width:440px}
.config-after-kicker{font-size:10px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase;color:#bcc9ff}
.config-after-texte p{font-size:13px;line-height:1.6;color:#c9d2e6}
.config-after-texte strong{color:#fff;font-weight:700}
.config-contact{display:flex;flex-direction:column;gap:10px}
.config-contact-titre{font-size:12px;font-weight:650;color:#fff}
.config-contact-liens{display:flex;flex-direction:column;gap:8px}
.contact-lien{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 18px;border:1px solid #ffffff3d;border-radius:999px;background:transparent;color:#fff;font-size:13px;font-weight:650;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s}
.contact-lien>svg{flex:none}
.contact-lien:hover{background:#ffffff14;border-color:#ffffff80}
.contact-lien:focus-visible{outline:3px solid #fff;outline-offset:3px}
.contact-whatsapp>svg{color:#5ce08c}
.contact-rdv{background:#fff;border-color:#fff;color:var(--nuit)}
.contact-rdv:hover{background:#e8eeff;border-color:#e8eeff}
.contact-lien.a-renseigner{opacity:.45;cursor:not-allowed}
.config-contact-note{font-size:10px;color:#9fb0d6}
@media(min-width:700px){
 .config-after{flex-direction:row;justify-content:space-between;align-items:center;gap:40px;padding-block:30px 32px}
 .config-contact{align-items:flex-end}
 .config-contact-liens{flex-direction:row;gap:10px}
 .config-contact-note{text-align:right}
}
@media print{.config-after{background:#fff;color:#172746}}
/* Plus d'espace gris sous la bande de contact : la section du configurateur s'arrête avec la bande, les photos
   viennent juste après. */
.config-section{padding-bottom:0;border-bottom:0}
.config-after{margin-bottom:0}
/* La section du configurateur commence par les techniques sur fond papier (plus d'introduction bleu nuit). */
.config-section{background:var(--paper);border-top:0}
/* Texte réservé aux lecteurs d'écran, partout dans la page (titres de sections sans en-tête visible). */
.visuellement-cache{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Logo dessiné (assets/logo, 27/09/2026) : remplace le mot « customcup✳ » en texte dans l'en-tête et le pied. */
.brand{display:inline-flex;align-items:center;min-height:44px}.brand img{display:block;height:36px;width:auto}.brand-pied img{height:28px}@media (max-width:699px){.brand img{height:30px}.brand-pied img{height:26px}}

/* ================================================================= Menu et pied de page (27/09/2026)
   Balisage : header.site-header et footer.site-footer des pages ; comportement : menu.js. */
.header-inner{gap:14px}
.header-inner .menu{display:none}
.entete-cta{margin-left:auto}
.menu-bouton{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;flex:none;width:44px;height:44px;margin-right:-10px;padding:0 11px;border:0;background:none;cursor:pointer}
.menu-bouton span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s ease}
.menu-bouton[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-bouton[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
html.menu-ouvert{overflow:hidden}
.menu-liens{list-style:none;margin:0;padding:0}
.menu-deroulant{font:inherit;cursor:pointer}
.menu-carte{display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.menu-carte img{display:block;width:100%;aspect-ratio:1;object-fit:contain;border-radius:10px;background:#fff;transition:transform .25s ease}
.menu-carte strong{display:block;font-size:14px;font-weight:650;letter-spacing:-.2px}
.menu-carte small{display:block;margin-top:2px;font-size:11px;line-height:1.4;color:var(--muted)}
.menu-carte[aria-current="page"] strong{color:var(--action)}

/* Menu mobile et tablette : plein écran sous l'en-tête, gros liens, les deux occasions en images. */
@media(max-width:999px){
  .header-inner .menu.ouvert{display:flex;flex-direction:column;position:fixed;left:0;right:0;top:var(--menu-top,66px);bottom:0;z-index:30;overflow-y:auto;padding:8px 20px calc(24px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line)}
  .menu-liens>li{border-bottom:1px solid var(--line)}
  .menu-liens>li>a,.menu-deroulant{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:0;border:0;background:none;color:var(--ink);font-size:21px;font-weight:650;letter-spacing:-.5px;text-align:left}
  .menu-liens>li>a:after{content:"↗";font-size:17px;font-weight:400;color:var(--muted)}
  .menu-deroulant{pointer-events:none}
  .menu-deroulant span{display:none}
  .menu-panneau{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:2px 0 18px}
  .menu-cta{justify-content:space-between;width:100%;margin-top:22px}
}
@media(min-width:700px) and (max-width:999px){.header-inner .menu.ouvert{padding-inline:36px}.menu-panneau{grid-template-columns:repeat(2,minmax(0,220px))}}

/* Ordinateur : liens au centre, « Occasions » ouvre un panneau illustré. */
@media(min-width:1000px){
  .header-inner .menu-bouton,.header-inner .menu .menu-cta{display:none}
  .header-inner .menu{display:flex;align-items:center;margin-inline:auto}
  .menu-liens{display:flex;align-items:center;gap:6px}
  .menu-liens>li>a,.menu-deroulant{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--ink);font-size:13px;font-weight:600;letter-spacing:-.1px;transition:background .15s ease,color .15s ease}
  .menu-liens>li>a:hover,.menu-deroulant:hover,.menu-deroulant[aria-expanded="true"]{background:var(--soft);color:var(--action)}
  .menu-deroulant.actif{color:var(--action)}
  .menu-deroulant span{width:6px;height:6px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
  .menu-deroulant[aria-expanded="true"] span{margin-top:3px;transform:rotate(-135deg)}
  .menu-occasions{position:relative}
  .menu-panneau{display:none;position:absolute;top:calc(100% + 12px);left:50%;z-index:40;grid-template-columns:repeat(4,168px);gap:12px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 22px 50px #2029441f,0 2px 8px #2029440f;transform:translateX(-50%)}
  .menu-panneau:before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .menu-panneau.ouvert{display:grid;animation:menu-apparait .18s ease}
  .menu-carte{padding:8px 8px 12px;border-radius:12px;transition:background .15s ease}
  .menu-carte:hover{background:var(--soft)}
  .menu-carte:hover img{transform:scale(1.04)}
  .menu-carte img{aspect-ratio:4/3;background:var(--paper)}
}
@keyframes menu-apparait{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.menu-panneau.ouvert{animation:none}.menu-carte img,.menu-bouton span{transition:none}}

/* Pied de page : bande marine pleine largeur, marque et appel à l'action, trois colonnes, ligne légale. */
.site-footer{display:block;padding:0;background:var(--ink);color:#fff}
.pied-haut{display:grid;gap:36px;padding-block:48px 36px}
.pied-marque p{margin-top:14px;max-width:280px;font-size:16px;line-height:1.45;letter-spacing:-.2px;color:#ffffffd9}
.pied-cta{margin-top:22px;border-color:#fff;background:#fff;color:var(--ink)}
.pied-cta:hover{border-color:var(--highlight);background:var(--highlight);color:var(--ink)}
.pied-colonnes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
.pied-colonnes .pied-titre{margin:0 0 12px;font-size:10px;font-weight:650;line-height:1.4;letter-spacing:1.4px;text-transform:uppercase;color:#ffffff8c}
.pied-colonnes ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pied-colonnes a{font-size:14px;line-height:1.4;color:#fff}
.pied-colonnes a:hover{text-decoration:underline;text-underline-offset:3px}
.pied-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-block:18px 26px;border-top:1px solid #ffffff1f}
.pied-bas p{margin:0;font-size:11px;line-height:1.6;color:#ffffff99}
.pied-legal{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:11px;color:#ffffffb3}
.site-footer .brand-pied img{height:30px}
@media(min-width:700px){.pied-colonnes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.pied-haut{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:48px;padding-block:64px 44px}}

/* Bande qui défile avant le configurateur (28/09/2026, defile.js). Page mariage : titre d'une ligne, flèches et
   cartes de modèles recopiées de la grille. Accueil (.defile-seul) : images de gobelets seules, sans texte. */
.defile{padding:0 0 18px}
.defile-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.defile-titre{font-size:15px;line-height:1.3;letter-spacing:-.2px;font-weight:650}
.defile-titre span{margin-left:8px;font-size:11px;font-weight:500;letter-spacing:0;color:var(--muted)}
.defile-fleches{display:none;gap:6px}
.defile-fleches button{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--ink);font-size:17px;line-height:1;cursor:pointer}
.defile-fleches button:focus-visible{outline:3px solid var(--action);outline-offset:2px}
.defile-piste{display:flex;gap:10px;margin-top:10px;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.defile-piste::-webkit-scrollbar{display:none}
.defile-carte{flex:0 0 auto;width:104px;display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;padding:0 0 6px;border:0;border-radius:10px;background:var(--white);color:var(--ink);font:inherit;cursor:pointer;text-align:center}
.defile-carte img{display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:10px 10px 0 0;pointer-events:none;-webkit-user-drag:none}
.defile-carte span{font-size:10px;font-weight:600;line-height:1.25;padding:0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.defile-carte:focus-visible{outline:3px solid var(--action);outline-offset:-3px}
.defile-seul .defile-piste{margin-top:0;gap:18px}
.defile-image{flex:0 0 auto;display:block;width:auto;height:150px;aspect-ratio:1145/1374;pointer-events:none;-webkit-user-drag:none;user-select:none}
/* 8 des 10 images ont un fond blanc opaque : multiply le fond dans le fond de la page (le blanc devient la couleur du fond). */
.defile-image{mix-blend-mode:multiply}
@media(min-width:700px){
 .defile{padding:0 0 22px}
 .defile-fleches{display:flex}
 .defile-piste{gap:12px;padding:0 max(36px,calc((100% - 1280px) / 2)) 4px}
 .defile-carte{width:128px}
 .defile-carte span{font-size:11px}
 .defile-seul .defile-piste{gap:28px}
 .defile-image{height:190px}
}
/* Menu « Occasions » en deux groupes, Particuliers et Professionnels (28/09/2026, outils/generer_pages_occasions.py). */
.menu-panneau{grid-template-columns:1fr;gap:18px}
.menu-groupe-titre{margin:0 0 8px;font-size:10px;font-weight:650;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.menu-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.menu-cartes .menu-carte{gap:4px}
.menu-cartes .menu-carte strong{font-size:12px;line-height:1.3}
@media(min-width:1000px){
 .menu-panneau{grid-template-columns:auto auto;gap:22px;padding:16px 18px}
 .menu-groupe:first-child .menu-cartes{grid-template-columns:repeat(3,108px)}
 .menu-groupe:last-child .menu-cartes{grid-template-columns:repeat(2,108px)}
 .menu-groupe+.menu-groupe{padding-left:22px;border-left:1px solid var(--line)}
}
@media(min-width:900px){.pied-colonnes{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Bande de gobelets à la place de la galerie de photos (28/09/2026) : sous la bande de contact bleu nuit, avant « Nos gobelets ». */
.editorial>.defile-seul{padding:38px 0 30px}
@media(min-width:700px){.editorial>.defile-seul{padding:54px 0 40px}}
/* Pied de page : liens légaux (28/09/2026) et coordonnées. */
.pied-legal a{color:inherit}
.pied-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pied-contact{display:flex;flex-wrap:wrap;gap:4px 14px;margin:14px 0 0;font-size:12px}
.pied-contact a{color:#fff}
.pied-contact a:hover{text-decoration:underline;text-underline-offset:3px}