/* ================================================================ WALLY'S — feuille de style (site une page, photos au premier plan) ================================================================ TOUT LE DESIGN SE RÈGLE DANS LE BLOC :root CI-DESSOUS. ================================================================ */ :root{ /* ---- COULEURS — modifie ici ---- */ --fond: #FBF4E8; /* fond général (crème chaud) */ --carte-fond: #FFFFFF; /* fond des cartes produit */ --sombre: #201612; /* textes forts, footer */ --accent: #D8261C; /* prix, liens actifs (rouge logo) */ --accent-2: #FFC219; /* boutons, surlignages (jaune logo) */ --accent-3: #F5821F; /* touches secondaires (orange logo) */ --texte-doux: #8C7C6D; /* descriptions */ --ligne: #EBDFCB; /* ---- POLICES — modifie ici (et le lien Google Fonts du ) ---- */ --police-titres: 'Anton', Impact, sans-serif; --police-texte: 'Inter', Arial, sans-serif; /* ---- FORMES — modifie ici ---- */ --arrondi: 22px; /* arrondi des photos et cartes */ --arrondi-btn: 999px; /* boutons pilule ; mets 8px pour des boutons carrés */ --largeur: 1160px; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{background:var(--fond);color:var(--sombre);font-family:var(--police-texte);-webkit-font-smoothing:antialiased;overflow-x:hidden;} img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} .display{font-family:var(--police-titres);font-weight:400;text-transform:uppercase;line-height:.94;} .rouge{color:var(--accent);} /* ---------- HEADER ---------- */ .entete{position:sticky;top:0;z-index:80;background:color-mix(in srgb, var(--fond) 92%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne);} .entete-in{max-width:var(--largeur);margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;} .entete .logo img{height:46px;width:auto;} .ancres{display:flex;gap:6px;} .ancres a{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;border-radius:var(--arrondi-btn);transition:background .16s;} .ancres a:hover,.ancres a:focus-visible{background:var(--ligne);} .burger{display:none;background:var(--sombre);color:#fff;border:0;cursor:pointer;font-family:inherit;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;border-radius:var(--arrondi-btn);} /* ---------- HERO SPLIT ---------- */ .hero{max-width:var(--largeur);margin:0 auto;padding:clamp(30px,6vw,70px) 20px;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;} .hero h1{font-size:clamp(40px,7.5vw,86px);} .hero .accroche{margin-top:18px;font-size:15.5px;line-height:1.7;color:var(--texte-doux);max-width:460px;} .hero .boutons{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;} .hero .repere{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px;} .pastille{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--carte-fond);border:1px solid var(--ligne);padding:8px 13px;border-radius:var(--arrondi-btn);} .hero-visu{position:relative;} .hero-visu .grande{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--arrondi);box-shadow:0 24px 60px rgba(32,22,18,.22);} .hero-visu .petite{ position:absolute;left:-8%;bottom:-9%;width:44%;aspect-ratio:1;object-fit:cover; border-radius:var(--arrondi);border:6px solid var(--fond); box-shadow:0 16px 40px rgba(32,22,18,.25);transform:rotate(-4deg); } .btn{display:inline-block;font-family:var(--police-titres);font-size:14.5px;text-transform:uppercase;letter-spacing:.04em;padding:15px 26px;border-radius:var(--arrondi-btn);background:var(--accent-2);color:var(--sombre);transition:transform .16s;} .btn:hover,.btn:focus-visible{transform:translateY(-2px);} .btn.contour{background:transparent;box-shadow:inset 0 0 0 2px var(--sombre);} .btn.rouge-b{background:var(--accent);color:#fff;} /* ---------- SECTIONS ---------- */ .bloc{padding:clamp(48px,8vw,88px) 20px;} .bloc-in{max-width:var(--largeur);margin:0 auto;} .bloc-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:26px;flex-wrap:wrap;} .bloc-tete h2{font-size:clamp(26px,5.5vw,50px);} .bloc-tete p{font-size:13.5px;color:var(--texte-doux);max-width:380px;line-height:1.6;} .bloc.rouge-s{background:var(--accent);color:#fff;} .bloc.rouge-s .bloc-tete p{color:#FFD9D4;} .bloc.sombre-s{background:var(--sombre);color:#fff;} .bloc.sombre-s .bloc-tete p{color:#B9A99B;} /* ---------- BENTO GAMMES ---------- */ .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:14px;} .tuile{position:relative;overflow:hidden;border-radius:var(--arrondi);display:block;} .tuile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s;} .tuile:hover img{transform:scale(1.05);} .tuile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(20,12,8,.72));} .tuile .lab{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;} .tuile .lab b{font-family:var(--police-titres);font-size:clamp(18px,2.6vw,26px);text-transform:uppercase;display:block;line-height:1;} .tuile .lab span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85;} .t-1{grid-column:span 2;grid-row:span 2;} .t-2{grid-column:span 2;} .t-3{grid-column:span 1;} .t-4{grid-column:span 1;} /* ---------- CARTE : RANGÉES DE CARTES PHOTO ---------- */ .famille{margin-top:44px;} .famille-tete{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;} .famille-tete h3{font-family:var(--police-titres);font-size:clamp(21px,4.5vw,32px);text-transform:uppercase;} .famille-tete small{font-size:12px;color:var(--texte-doux);font-weight:600;} .rangee{ display:flex;gap:14px;overflow-x:auto;padding:14px 2px 18px; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none; } .rangee::-webkit-scrollbar{display:none;} .produit{ flex:0 0 218px;scroll-snap-align:start; background:var(--carte-fond);border:1px solid var(--ligne);border-radius:var(--arrondi); overflow:hidden;display:flex;flex-direction:column; } .produit img{width:100%;aspect-ratio:4/3.1;object-fit:cover;} .produit .inf{padding:13px 14px 15px;display:flex;flex-direction:column;gap:5px;flex:1;} .produit .inf b{font-family:var(--police-titres);font-size:16px;text-transform:uppercase;line-height:1.05;} .produit .inf i{font-style:normal;font-size:11.5px;color:var(--texte-doux);line-height:1.45;} .produit .inf .px{margin-top:auto;font-family:var(--police-titres);font-size:17px;color:var(--accent);} .produit.texte{justify-content:center;background:var(--fond);border-style:dashed;} .produit.texte .inf{padding:18px 16px;} /* ---------- BOX DAY ---------- */ .boxwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;} .boxc{background:#fff;color:var(--sombre);border-radius:var(--arrondi);padding:26px 22px;} .boxc .prix{font-family:var(--police-titres);font-size:50px;line-height:1;color:var(--accent);} .boxc h3{font-family:var(--police-titres);font-size:18px;text-transform:uppercase;margin:10px 0 12px;} .boxc li{list-style:none;font-size:13px;line-height:1.55;color:#6E5F52;padding-left:15px;position:relative;margin-bottom:5px;} .boxc li::before{content:"+";position:absolute;left:0;color:var(--accent-3);font-weight:900;} .horaire-note{margin-top:22px;font-family:var(--police-titres);font-size:clamp(16px,3.4vw,22px);text-transform:uppercase;color:#fff;background:var(--sombre);display:inline-block;padding:12px 20px;border-radius:var(--arrondi-btn);} /* ---------- INFOS ---------- */ .infogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;} .infoc{background:#2B1F19;border-radius:var(--arrondi);padding:24px 22px;} .infoc h3{font-size:10.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:#A6968A;margin-bottom:12px;} .infoc p{font-family:var(--police-titres);font-size:20px;text-transform:uppercase;line-height:1.25;} .infoc p.petit{font-family:var(--police-texte);font-size:13px;text-transform:none;color:#C9BBAE;line-height:1.6;} /* ---------- FOOTER ---------- */ .pied{background:var(--sombre);color:#fff;padding:36px 20px 30px;border-top:1px solid #33261E;} .pied-in{max-width:var(--largeur);margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;} .pied img{height:40px;width:auto;} .pied small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8C7C6D;} /* ---------- ANIM ---------- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease;} .reveal.vu{opacity:1;transform:none;} /* ---------- RESPONSIVE ---------- */ @media (max-width:860px){ .ancres{display:none;position:absolute;top:100%;left:0;right:0;background:var(--fond);border-bottom:1px solid var(--ligne);flex-direction:column;gap:0;padding:8px 20px 14px;} .ancres.ouvert{display:flex;} .ancres a{padding:13px 4px;border-bottom:1px solid var(--ligne);border-radius:0;width:100%;} .burger{display:block;} .hero{grid-template-columns:1fr;} .hero-visu{order:-1;} .hero-visu .petite{left:auto;right:-4%;} .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;} .t-1{grid-column:span 2;grid-row:span 1;} .t-2{grid-column:span 2;} } @media (min-width:1000px){ /* sur grand écran, les rangées passent en grille sans scroll */ .rangee{flex-wrap:wrap;overflow:visible;} .produit{flex:0 0 calc(25% - 11px);} } @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;} .reveal{opacity:1;transform:none;} html{scroll-behavior:auto;} } :focus-visible{outline:3px solid var(--accent);outline-offset:3px;} /* badge menu bien visible sur la carte */ .badge-menu{ font-family:var(--police-titres);font-size:clamp(15px,3.4vw,20px); text-transform:uppercase;letter-spacing:.03em;color:var(--sombre); background:var(--accent-2);padding:12px 20px;border-radius:var(--arrondi-btn); display:inline-block;max-width:none !important; }