/* MSG Céramique — main.css (partagé par les 5 pages) Toutes les valeurs proviennent des designs .dc.html — ne rien « améliorer ». Fontes (lien exact à mettre dans le de chaque page) : https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Hanken+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap */ /* ---------- Tokens ---------- */ :root{ --bg:#FBFAF7; --ink:#201C16; --blue:#002FA7; --blue-dark:#00227A; --cream:#F4F1EA; --beige:#EDE6D8; --muted:#57503f; --muted-2:#6B6357; --muted-3:#443f39; --label:#8a7f6a; --blue-soft:#8FB0FF; } /* ---------- Base ---------- */ *{box-sizing:border-box} html,body{margin:0;overflow-x:clip} body{background:var(--bg);font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased} a{color:var(--blue);text-decoration:none} a:hover{color:var(--blue-dark)} input,textarea,button{font-family:inherit} input:focus,textarea:focus{outline:none} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px} /* ---------- Helpers typo / layout ---------- */ .ff-serif{font-family:'Fraunces',serif} .ff-serif-italic{font-family:'Fraunces',serif;font-style:italic} .ff-mono{font-family:'Space Mono',monospace} .page{min-height:100vh;background:var(--bg);display:flex;flex-direction:column} .page > main{flex:1} .wrap{max-width:1440px;margin:0 auto;padding-left:clamp(20px,4vw,50px);padding-right:clamp(20px,4vw,50px)} /* ---------- Animations ---------- */ @keyframes msgFade{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} @keyframes msgToast{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}} /* Reveal au scroll — site.js ajoute .in via IntersectionObserver. L'état masqué n'est appliqué que si JS est actif (html.js). */ html.js .rv{opacity:0;transform:translateY(22px)} html.js .rv.in{animation:msgFade .7s cubic-bezier(.2,.7,.2,1) both} @media (prefers-reduced-motion:reduce){ html.js .rv{opacity:1;transform:none} html.js .rv.in{animation:none} .toast{animation:none} } /* ---------- Grain (overlay ::before ; le contenu direct doit être position:relative pour passer au-dessus, comme dans les designs) ---------- */ .grain{position:relative;overflow:hidden} .grain::before{content:'';position:absolute;inset:0;background-image:url(../img/grain.png);background-size:260px;opacity:.5;pointer-events:none} .grain--55::before{opacity:.55} .grain--60::before{opacity:.6} .grain--220::before{background-size:220px} /* ---------- Header ---------- */ .site-header{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(32,28,22,.12)} .header-inner{max-width:1440px;margin:0 auto;height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,50px)} .brand{display:flex;align-items:center;gap:12px} .brand img{height:34px;width:auto;display:block} .brand span{font-family:'Fraunces',serif;font-size:20px;font-weight:500;letter-spacing:.005em;color:var(--ink)} .main-nav{display:none} .main-nav a{font:500 12.5px 'Hanken Grotesk';letter-spacing:.09em;text-transform:uppercase;color:var(--ink)} .main-nav a:hover{color:var(--blue)} .main-nav a[data-active]{font-weight:600;color:var(--blue)} .header-right{display:flex;align-items:center;gap:18px} .lang{font:700 12px 'Hanken Grotesk';letter-spacing:.08em} .lang .lang-fr{color:var(--blue)} .lang .lang-sep{color:#b9b1a3;margin:0 5px} .lang .lang-en{color:#b9b1a3} .cart-link{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;color:var(--ink)} .cart-link:hover{color:var(--blue)} .cart-icon{position:relative;display:block;width:19px;height:16px;border:1.7px solid currentColor;border-radius:1px 1px 3px 3px;margin-top:5px} .cart-icon::before{content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:11px;height:8px;border:1.7px solid currentColor;border-bottom:none;border-radius:6px 6px 0 0} .cart-badge{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;padding:0 4px;background:var(--blue);color:var(--cream);border-radius:9px;font:700 10px 'Hanken Grotesk';display:flex;align-items:center;justify-content:center} .cart-badge[hidden]{display:none} .burger{display:none;background:none;border:none;padding:6px;cursor:pointer} .burger span{width:21px;height:1.7px;background:var(--ink);display:block} .mobile-menu{display:none;border-top:1px solid rgba(32,28,22,.1);background:var(--bg);padding:14px clamp(20px,4vw,50px) 22px;flex-direction:column;gap:4px} .mobile-menu a{font:500 15px 'Hanken Grotesk';color:var(--ink);padding:10px 0;border-bottom:1px solid rgba(32,28,22,.08)} .mobile-menu a:last-child{border-bottom:none} .mobile-menu a[data-active]{font-weight:600;color:var(--blue)} @media (min-width:1024px){ .main-nav{display:flex;gap:30px;align-items:center} } @media (max-width:1023.98px){ .burger{display:flex;flex-direction:column;gap:4px} .mobile-menu.open{display:flex} } /* ---------- Section label (tiret + texte uppercase) ---------- */ .section-label{display:flex;align-items:center;gap:12px;font:700 12px 'Hanken Grotesk';letter-spacing:.2em;text-transform:uppercase;color:var(--blue)} .section-label::before{content:'';width:34px;height:1.5px;background:var(--blue);display:block;flex:none} .section-label--sm{letter-spacing:.18em} .section-label--sm::before{width:30px} .section-label--cream{color:rgba(244,241,234,.85)} .section-label--cream::before{background:rgba(244,241,234,.65)} /* ---------- Boutons ---------- */ .btn{display:inline-flex;align-items:center;gap:12px;padding:16px 30px;font:600 12.5px 'Hanken Grotesk';letter-spacing:.13em;text-transform:uppercase;border:none;background:none;cursor:pointer;text-decoration:none} .btn .arrow{font-size:15px} .btn-primary{background:var(--blue);color:var(--cream)} .btn-primary:hover{background:var(--blue-dark);color:var(--cream)} .btn-cream{background:var(--cream);color:var(--blue)} .btn-cream:hover{background:#fff;color:var(--blue)} .btn-outline{border:1px solid rgba(32,28,22,.3);color:var(--ink);padding:16px 34px} .btn-outline:hover{border-color:var(--blue);color:var(--blue)} .btn-outline-cream{border:1px solid rgba(244,241,234,.5);color:var(--cream)} .btn-outline-cream:hover{background:rgba(244,241,234,.1);border-color:#F4F1EA;color:var(--cream)} .btn-outline-cream-fill{border:1px solid rgba(244,241,234,.55);color:var(--cream);padding:16px 32px} .btn-outline-cream-fill:hover{background:var(--cream);color:var(--blue);border-color:#F4F1EA} .btn-pad-34{padding:16px 34px} .btn-pad-38{padding:16px 38px} .btn-pad-42{padding:16px 42px} /* Lien CTA souligné */ .link-cta{display:inline-flex;align-items:center;gap:11px;color:var(--blue);font:600 13px 'Hanken Grotesk';letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--blue);padding-bottom:5px} .link-cta:hover{color:var(--blue-dark);border-color:var(--blue-dark)} .link-cta .arrow{font-size:15px} .link-cta--cream{gap:10px;color:var(--cream);font:600 12px 'Hanken Grotesk';letter-spacing:.1em;border-bottom:1px solid rgba(244,241,234,.55);padding-bottom:4px} .link-cta--cream:hover{color:var(--cream);border-color:#fff} .link-cta--cream .arrow{font-size:14px} /* ---------- Formulaires (label + input souligné) ---------- */ .field{display:block} .field > span{display:block;font:700 10.5px 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin-bottom:9px} .field input,.field textarea{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(32,28,22,.34);padding:9px 0;font:400 16px 'Hanken Grotesk';color:var(--ink)} .field textarea{resize:none} .field input:focus,.field textarea:focus{border-color:var(--blue)} .field--cream > span{font:700 10px 'Space Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,241,234,.6);margin-bottom:9px} .field--cream input,.field--cream textarea{border-bottom-color:rgba(244,241,234,.4);color:var(--cream)} .field--cream input:focus,.field--cream textarea:focus{border-color:#F4F1EA} .form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:26px} /* Mini-label Space Mono (coordonnées, cartes) */ .mini-label{font:700 10.5px 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin-bottom:7px} /* État « Merci » (accueil) + variante sur fond bleu (professionnels) */ .form-success{background:var(--bg);border:1px solid rgba(32,28,22,.16);padding:40px 34px} .form-success .check{width:52px;height:52px;margin-bottom:20px;border-radius:50%;background:var(--blue);color:var(--cream);display:flex;align-items:center;justify-content:center;font:400 24px 'Hanken Grotesk'} .form-success .title{font-family:'Fraunces',serif;font-size:27px;color:var(--ink);margin-bottom:10px} .form-success p{font:400 15.5px/1.65 'Hanken Grotesk';color:var(--muted);margin:0} .form-success--onblue{background:rgba(244,241,234,.1);border:1px solid rgba(244,241,234,.3);padding:38px 30px;max-width:520px;margin:0 auto} .form-success--onblue .check{background:var(--cream);color:var(--blue);margin:0 auto 20px} .form-success--onblue .title{font-size:26px;color:var(--cream)} .form-success--onblue p{font:400 15px/1.6 'Hanken Grotesk';color:rgba(244,241,234,.85)} /* Encart « Bon à savoir » */ .info-note{margin:24px 0 0;padding:15px 18px;background:rgba(0,47,167,.06);border-left:2px solid var(--blue);font:400 13.5px/1.6 'Hanken Grotesk';color:#4a443a} .info-note b{font-weight:600} .info-note--lg{padding:17px 20px;font:400 14px/1.62 'Hanken Grotesk'} /* ---------- Pastilles sociales (34px = accueil ; --lg 36px = page contact) ---------- */ .social-btn{width:34px;height:34px;border:1px solid rgba(32,28,22,.28);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink)} .social-btn:hover{background:var(--blue);border-color:var(--blue);color:var(--cream)} .social-btn.social-f{font:700 16px Georgia,serif} .social-btn.social-g{font:700 15px Georgia,serif} .icon-insta{position:relative;display:block;width:15px;height:15px;border:1.6px solid currentColor;border-radius:5px} .icon-insta::before{content:'';position:absolute;top:2.6px;left:2.6px;width:7.8px;height:7.8px;border:1.6px solid currentColor;border-radius:50%} .icon-insta::after{content:'';position:absolute;top:1.4px;right:1.4px;width:2.1px;height:2.1px;background:currentColor;border-radius:50%} .social-btn--lg{width:36px;height:36px} .social-btn--lg.social-f{font:700 17px Georgia,serif} .social-btn--lg.social-g{font:700 16px Georgia,serif} .icon-insta--lg{width:16px;height:16px;border-width:1.7px;border-radius:5.5px} .icon-insta--lg::before{top:2.8px;left:2.8px;width:8.3px;height:8.3px;border-width:1.7px} .icon-insta--lg::after{top:1.5px;right:1.5px;width:2.2px;height:2.2px} /* ---------- Cartes ---------- */ .msg-card{display:block;text-decoration:none} .msg-card img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)} .msg-card:hover img{transform:scale(1.05)} .pj{transition:transform .5s cubic-bezier(.2,.7,.2,1)} .pj:hover{transform:translateY(-4px)} .pj img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)} .pj:hover img{transform:scale(1.05)} /* Tuile placeholder rayée (« photo produit » / « photo projet ») */ .ph-tile{aspect-ratio:4/5;background:var(--beige);background-image:repeating-linear-gradient(90deg,transparent 0 30px,rgba(0,47,167,.055) 30px 38px);border:1px solid rgba(32,28,22,.1);display:flex;align-items:center;justify-content:center} .ph-tile span{font:400 11px 'Space Mono',monospace;color:var(--blue);background:var(--bg);padding:6px 12px;border:1px solid rgba(0,47,167,.22)} /* Étiquette italique sous les photos (« à l'atelier, Vallauris »…) */ .photo-tag{background:var(--beige);padding:5px 12px;font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:#4a443a} /* ---------- Toast « Ajouté au panier » ---------- */ .toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:80;background:var(--ink);color:var(--cream);padding:14px 24px;display:flex;align-items:center;gap:12px;box-shadow:0 18px 44px -18px rgba(0,0,0,.5);animation:msgToast .35s cubic-bezier(.2,.7,.2,1) both} .toast .check{width:20px;height:20px;border-radius:50%;background:var(--blue);color:var(--cream);display:flex;align-items:center;justify-content:center;font:700 12px 'Hanken Grotesk'} .toast .msg{font:500 13.5px 'Hanken Grotesk';letter-spacing:.02em} .toast .view{font:600 12px 'Hanken Grotesk';letter-spacing:.08em;text-transform:uppercase;color:var(--blue-soft);margin-left:6px} .toast .view:hover{color:var(--blue-soft)} /* ---------- Ruban démo ---------- */ .demo-ribbon{position:fixed;left:12px;bottom:12px;z-index:90;display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--cream);padding:7px 12px;font:400 10.5px 'Space Mono',monospace;letter-spacing:.04em;opacity:.92} .demo-ribbon button{background:none;border:none;padding:0;margin:0;cursor:pointer;color:var(--cream);font:400 13px/1 'Space Mono',monospace;opacity:.75} .demo-ribbon button:hover{opacity:1} /* ---------- Footer (structure commune + 2 variantes) ---------- */ .site-footer{color:var(--cream)} .footer-blue{background:var(--blue)} .footer-dark{background:var(--ink)} .footer-inner{position:relative;max-width:1440px;margin:0 auto;padding:clamp(52px,6vw,78px) clamp(20px,4vw,50px) 38px} .footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:44px;padding-bottom:48px;border-bottom:1px solid rgba(244,241,234,.22)} .footer-dark .footer-top{border-bottom-color:rgba(244,241,234,.18)} .footer-brand{max-width:330px} .footer-brand-row{display:flex;align-items:center;gap:12px;margin-bottom:18px} .footer-brand-row img{height:36px;width:auto;display:block} .footer-brand-row span{font-family:'Fraunces',serif;font-size:20px;font-weight:500;color:var(--cream)} .footer-brand p{font:400 14.5px/1.65 'Hanken Grotesk';color:rgba(244,241,234,.78);margin:0} .footer-dark .footer-brand p{color:rgba(244,241,234,.72)} .footer-cols{display:flex;flex-wrap:wrap;gap:56px} .footer-col-title{font:700 10.5px 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,234,.55);margin-bottom:16px} .footer-dark .footer-col-title{color:var(--blue-soft)} .footer-col-links{display:flex;flex-direction:column;gap:10px;font:400 14.5px 'Hanken Grotesk'} .footer-blue .footer-col-links a{color:#F4F1EA} .footer-dark .footer-col-links a{color:rgba(244,241,234,.86)} .footer-col-contact{font:400 14.5px/1.5 'Hanken Grotesk';color:rgba(244,241,234,.85)} .footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding-top:24px;font:400 11.5px 'Space Mono',monospace;letter-spacing:.04em;color:rgba(244,241,234,.6)} .footer-dark .footer-bottom{color:rgba(244,241,234,.55)} .footer-blue .footer-bottom a{color:rgba(244,241,234,.6)} .footer-dark .footer-bottom a{color:rgba(244,241,234,.55)} .footer-legal{display:flex;gap:22px}