/* ══════════════════════════════════════════════════════════════════════════ EasyPousette — feuille de styles du site full code Reprise de la maquette « V3 Extreme » : palette, typographie, rythme, composants. Deux differences assumees : 1. aucun `style=` en ligne. La CSP du vhost interdit `unsafe-inline` ; chaque valeur ponctuelle de la maquette est devenue une classe. 2. les composants absents de la maquette (fiche produit, collection, article, pagination) sont ecrits dans le meme vocabulaire visuel. ══════════════════════════════════════════════════════════════════════════ */ :root{ --ink:#251a28; --ink2:#57465d; --plum:#2d1e32; --plum2:#4d3953; --mauve:#7c677e; --rose:#efcbd3; --rose2:#e8a8b8; --sage:#abc6a4; --sage2:#dce9d8; --cream:#fbf7f1; --sand:#f1e8df; --yellow:#f3db94; --white:#fff; --line:rgba(45,30,50,.11); --shadow:0 24px 70px rgba(45,30,50,.12); --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; color:var(--ink); background: radial-gradient(circle at 8% 2%,rgba(239,203,211,.5),transparent 25rem), radial-gradient(circle at 92% 18%,rgba(171,198,164,.36),transparent 30rem), linear-gradient(#fffdfa,#faf6f0 58%,#fff); font-family:var(--sans); overflow-x:hidden; } /* Le grain de la maquette. `pointer-events:none` est indispensable : la couche couvre tout l ecran et intercepterait sinon chaque clic. */ body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.09; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); } a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit} img{max-width:100%;display:block} .wrap{width:min(1280px,calc(100% - 44px));margin:auto} .eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mauve)} .eyebrow-rose{color:var(--rose)} .serif{font-family:var(--serif)} /* Le lien d evitement : premier element focalisable de chaque page. */ .saut{position:absolute;left:-9999px;top:0;background:var(--plum);color:#fff;padding:12px 18px;border-radius:0 0 12px 0;z-index:200} .saut:focus{left:0} /* Une seule regle de focus, visible sur fond clair comme sur fond prune. */ a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{ outline:3px solid var(--rose2);outline-offset:3px;border-radius:6px } /* Les apparitions au defilement. Sans JS — ou si l utilisateur a demande moins d animations — le contenu doit rester lisible : c est le JS qui pose `js` sur , donc l etat masque n existe que s il peut etre annule. */ .js .reveal{opacity:0;transform:translateY(22px);transition:.8s cubic-bezier(.2,.8,.2,1)} .js .reveal.on{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js .reveal{opacity:1;transform:none;transition:none} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* ── bandeau d annonce ──────────────────────────────────────────────────── */ .topbar{ width:min(1280px,calc(100% - 44px));margin:14px auto 0; display:flex;justify-content:space-between;gap:18px;align-items:center; background:var(--plum);color:#fff;border-radius:999px;padding:10px 18px; font-size:.78rem;box-shadow:0 10px 30px rgba(45,30,50,.12); } .topbar b{color:var(--rose);font-weight:700} .topbar .mini{opacity:.76} .topbar .spark{color:var(--yellow)} /* ── navigation ────────────────────────────────────────────────────────── */ .nav{ position:sticky;top:12px;z-index:50; width:min(1180px,calc(100% - 44px));margin:18px auto 0; background:rgba(255,255,255,.82);backdrop-filter:blur(18px); border:1px solid rgba(45,30,50,.09);border-radius:22px; padding:12px 14px 12px 18px;display:flex;align-items:center;gap:22px; box-shadow:0 12px 36px rgba(45,30,50,.07) } .logo{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.03em} .logo img{display:block;height:36px;width:auto;flex:none} .logo .logoSeul{display:none} .footerTitle img{display:block;height:44px;width:auto} .navlinks{display:flex;gap:22px;margin:auto;font-size:.86rem;color:#66576a} .navlinks>*{position:relative} .navlinks a::after{content:"";height:2px;background:var(--rose2);position:absolute;left:0;right:100%;bottom:-5px;transition:.2s} .navlinks a:hover::after,.navlinks a:focus-visible::after{right:0} .navActions{display:flex;gap:8px;align-items:center} .iconBtn{width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;color:var(--plum)} .pillBtn{padding:12px 18px;border-radius:999px;background:var(--plum);color:#fff;font-weight:700;border:0;cursor:pointer;white-space:nowrap} .iconBtn svg,.pillBtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* Menu deroulant des rayons. Il s ouvre au survol ET au clavier : `:has()` couvre le focus a l interieur du panneau, ce que `:focus-within` seul ne ferait pas sur le declencheur. */ .rayon{position:relative} .rayonBtn{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;color:inherit;padding:0;font-size:.86rem} .rayonBtn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .2s} .rayonPanneau{ position:absolute;left:50%;transform:translateX(-50%) translateY(8px);top:calc(100% + 14px); width:min(760px,86vw);background:#fff;border:1px solid var(--line);border-radius:22px; box-shadow:0 26px 60px rgba(45,30,50,.16);padding:22px; display:grid;grid-template-columns:repeat(3,1fr);gap:18px 26px; opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s,transform .22s;z-index:60; /* 8 groupes et 55 liens : le panneau depasse l ecran. Sans hauteur maximale ni defilement, son bas etait hors d atteinte. */ max-height:min(72vh,calc(100vh - 170px)); overflow-y:auto; /* La roulette arrivee en bas du panneau ne doit pas emporter la page. */ overscroll-behavior:contain } /* Une barre de defilement discrete, dans la palette. */ .rayonPanneau{scrollbar-width:thin;scrollbar-color:var(--rose2) transparent} .rayonPanneau::-webkit-scrollbar{width:8px} .rayonPanneau::-webkit-scrollbar-track{background:transparent} .rayonPanneau::-webkit-scrollbar-thumb{background:var(--rose2);border-radius:999px; border:2px solid #fff} .rayonPanneau::-webkit-scrollbar-thumb:hover{background:var(--mauve)} .rayon:hover .rayonPanneau,.rayon:focus-within .rayonPanneau{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .rayon:hover .rayonBtn svg,.rayon:focus-within .rayonBtn svg{transform:rotate(180deg)} .rayonGroupe strong{display:block;font-family:var(--serif);font-size:1rem;margin-bottom:7px;color:var(--plum)} .rayonGroupe a{display:block;font-size:.82rem;color:#6b5b70;padding:3px 0} .rayonGroupe a:hover{color:var(--plum)} /* ── hero ──────────────────────────────────────────────────────────────── */ .hero{padding:76px 0} .heroGrid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr);gap:70px;align-items:center} .kicker{ display:inline-flex;align-items:center;gap:10px;padding:9px 13px;border-radius:999px; background:rgba(255,255,255,.75);border:1px solid var(--line);box-shadow:0 8px 26px rgba(45,30,50,.07); font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase } .kicker .dot{width:8px;height:8px;background:var(--sage);border-radius:50%;box-shadow:0 0 0 6px rgba(171,198,164,.2)} .hero h1{ font-family:var(--serif);font-weight:900;font-size:clamp(3.3rem,6.7vw,6.2rem); line-height:.93;letter-spacing:-.055em;margin:24px 0;max-width:790px } .scribble{position:relative;display:inline-block;color:var(--plum);z-index:0} .scribble::after{ content:"";position:absolute;left:-1%;right:-1%;height:.21em;bottom:.04em; background:var(--rose);z-index:-1;border-radius:999px;transform:rotate(-2deg) } .heroLead{max-width:610px;color:#67576c;font-size:1.06rem;line-height:1.72} .heroBtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .cta{padding:15px 24px;border-radius:999px;font-weight:800;display:inline-flex;gap:10px;align-items:center;transition:.25s;border:0;cursor:pointer} .ctaDark{background:var(--plum);color:#fff;box-shadow:7px 7px 0 var(--rose)} .ctaDark:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--rose2)} .ctaGhost{border:1.5px solid var(--plum);background:rgba(255,255,255,.42);color:var(--plum)} .trustline{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px} .trustChip{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.6);font-size:.77rem;color:#75657a} .trustChip strong{color:var(--plum)} .heroVisual{position:relative;min-height:590px} .heroCard{ position:absolute;right:22px;top:4px;width:82%;height:540px;padding:13px; border-radius:38px;background:rgba(255,255,255,.68);border:1px solid rgba(45,30,50,.09); box-shadow:0 34px 80px rgba(45,30,50,.2),18px 18px 0 rgba(239,203,211,.7); transform:rotate(2.2deg);transition:.35s;overflow:hidden;backdrop-filter:blur(14px) } .heroCard:hover{transform:rotate(-.5deg) translateY(-7px)} .heroCard img{width:100%;height:100%;object-fit:cover;border-radius:28px} .heroCard::after{ content:"";position:absolute;inset:auto 13px 13px 13px;height:40%; border-radius:0 0 28px 28px;background:linear-gradient(transparent,rgba(20,12,22,.55)) } .floatBadge{ position:absolute;z-index:5;padding:12px 15px;border-radius:16px;background:rgba(255,255,255,.92); border:1px solid var(--line);box-shadow:0 14px 32px rgba(45,30,50,.14);backdrop-filter:blur(12px); font-weight:800;font-size:.82rem;animation:flotte 5s ease-in-out infinite } .floatBadge small{display:block;font-weight:500;color:#817187;margin-top:2px} .fb1{left:0;top:60px;border-left:4px solid var(--sage)} .fb2{right:-4px;bottom:72px;border-left:4px solid var(--rose2);animation-delay:-2s} .fb3{left:30px;bottom:20px;border-left:4px solid var(--yellow);animation-delay:-3.4s} @keyframes flotte{50%{transform:translateY(-11px)}} .stamp{ position:absolute;right:-12px;top:-18px;width:108px;height:108px;border-radius:50%; display:grid;place-items:center;text-align:center;background:var(--plum);color:#fff; border:7px solid var(--cream);font-family:var(--serif);font-size:.76rem;line-height:1.1; transform:rotate(9deg);box-shadow:0 14px 30px rgba(45,30,50,.16);z-index:8 } /* ── bandeau defilant ──────────────────────────────────────────────────── */ .marqueeWrap{overflow:hidden;margin:0 auto 84px;border-radius:24px;background:var(--plum);color:#fff;box-shadow:var(--shadow)} .marquee{display:flex;gap:48px;width:max-content;padding:17px 0;animation:marq 28s linear infinite} .marquee span{font-family:var(--serif);font-weight:650;display:flex;gap:14px;align-items:center;white-space:nowrap} .marquee i{font-style:normal;color:var(--rose)} @keyframes marq{to{transform:translateX(-50%)}} /* ── manifeste ─────────────────────────────────────────────────────────── */ .manifesto{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;margin-bottom:26px} .manifestoDark,.manifestoLight{border-radius:34px;padding:46px} .manifestoDark{background:var(--plum);color:#fff;position:relative;overflow:hidden} .manifestoDark::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-120px;bottom:-160px;background:var(--rose);opacity:.13} .manifestoDark h2,.manifestoLight h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.7rem);line-height:1.02;letter-spacing:-.04em;margin:12px 0} .manifestoDark p{color:rgba(255,255,255,.72);line-height:1.7;position:relative} .manifestoLight{background:rgba(255,255,255,.68);border:1px solid var(--line);backdrop-filter:blur(14px);display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .proof{padding:22px;border-radius:24px;background:var(--cream);border:1px solid rgba(45,30,50,.07);display:flex;flex-direction:column;justify-content:space-between;min-height:180px} .proof b{font-family:var(--serif);font-size:2.4rem;color:var(--mauve)} .proof span{font-size:.82rem;color:#706076;line-height:1.55} /* ── Easy Finder ───────────────────────────────────────────────────────── */ .finder{margin:86px auto;background:linear-gradient(135deg,var(--sand),#fff);border:1px solid var(--line);border-radius:38px;padding:34px;box-shadow:0 18px 50px rgba(45,30,50,.07)} .finderTop{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:26px} .finderTop h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);margin:6px 0 0;letter-spacing:-.04em} .finderTop p{max-width:430px;color:#6c5b71} .finderGrid{display:grid;grid-template-columns:1fr 1.1fr;gap:18px} .finderChoices{background:#fff;border-radius:28px;padding:24px;border:1px solid var(--line)} .choiceTitle{font-weight:800;font-size:.86rem;margin-bottom:12px} .choiceBtns{display:flex;gap:8px;flex-wrap:wrap} .choiceBtn{border:1px solid var(--line);background:var(--cream);color:var(--plum);border-radius:999px;padding:11px 14px;cursor:pointer;font-weight:700;font-size:.8rem;transition:.2s} .choiceBtn[aria-pressed="true"]{background:var(--plum);color:#fff;border-color:var(--plum)} .choiceGroup+.choiceGroup{margin-top:22px} .recCard{background:var(--plum);color:#fff;border-radius:28px;padding:28px;display:grid;grid-template-columns:1fr 170px;gap:22px;align-items:center;overflow:hidden;position:relative} .recCard::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-60px;top:-70px;background:var(--rose);opacity:.12} .recCard>*{position:relative} .recCard h3{font-family:var(--serif);font-size:2rem;margin:7px 0 8px} .recCard p{color:rgba(255,255,255,.75);font-size:.88rem;line-height:1.65} .recPills{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px} .recPills span{border:1px solid rgba(255,255,255,.17);padding:6px 9px;border-radius:999px;font-size:.7rem} .recLien{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:800;font-size:.85rem;color:var(--rose);border-bottom:1px solid rgba(239,203,211,.4);padding-bottom:2px} .recArt{height:190px;border-radius:24px;background:linear-gradient(145deg,var(--rose),#fff);display:grid;place-items:center;transform:rotate(3deg)} .recArt svg{width:130px;height:130px} /* ── en-tetes de section ───────────────────────────────────────────────── */ .sectionHead{display:flex;justify-content:space-between;gap:28px;align-items:end;margin:86px 0 26px} .sectionHead h2{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.7rem);line-height:1;letter-spacing:-.04em;margin:8px 0 0} .sectionHead p{max-width:420px;color:#706076} .sectionHead .lienTout{white-space:nowrap;font-weight:800;font-size:.85rem;border-bottom:2px solid var(--rose2);padding-bottom:3px} /* ── mosaique des rayons ───────────────────────────────────────────────── */ .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px} .tile{position:relative;border-radius:30px;overflow:hidden;padding:30px;min-height:250px;border:1px solid rgba(45,30,50,.07);transition:.28s;display:flex;flex-direction:column;justify-content:flex-end} .tile:hover{transform:translateY(-6px);box-shadow:0 20px 45px rgba(45,30,50,.09)} .tile h3{font-family:var(--serif);font-size:1.7rem;line-height:1.05;margin:0 0 8px} .tile p{max-width:390px;font-size:.85rem;line-height:1.6;color:#5f5064;margin:0} .tile .arrow{position:absolute;right:20px;top:20px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;border:1px solid rgba(45,30,50,.08);color:var(--plum)} .tile .arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .tHero{grid-column:span 7;min-height:430px;color:#fff;background:var(--plum)} .tHero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.64} .tHero::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(30,17,33,.83))} .tHero>*:not(img){position:relative;z-index:2} .tHero p{color:rgba(255,255,255,.83)} .tBag{grid-column:span 5;background:var(--cream);min-height:430px} .tBag img{position:absolute;inset:0 0 auto;width:100%;height:58%;object-fit:cover} .tBag>*:not(img){position:relative;z-index:2} .tSmall{grid-column:span 4} .tPort{background:var(--sand)} .tGigo{background:var(--plum2);color:#fff} .tGigo p{color:rgba(255,255,255,.78)} .tGigo .arrow{background:rgba(255,255,255,.9)} .tPlay{background:linear-gradient(145deg,var(--sage),#d9e6d5)} .chipsRow{grid-column:span 12;border:1px dashed #cfbfb4;background:rgba(255,255,255,.65);border-radius:28px;padding:20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center} .chipsRow strong{font-family:var(--serif);margin-right:auto;font-size:1.2rem} .chip{padding:9px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.76rem;font-weight:700} .chip:hover{background:var(--plum);color:#fff;border-color:var(--plum)} /* ── cartes produit ────────────────────────────────────────────────────── */ .products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px} .product{background:#fff;border:1px solid var(--line);border-radius:28px;padding:12px;transition:.28s;display:flex;flex-direction:column} .product:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(45,30,50,.08)} .productImg{height:300px;border-radius:21px;background:var(--cream);overflow:hidden;position:relative} .grille .productImg{height:230px} .productImg img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .product:hover .productImg img{transform:scale(1.04)} .badge{position:absolute;left:12px;top:12px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.92);font-size:.68rem;font-weight:800;letter-spacing:.04em} .badgeRupture{background:rgba(45,30,50,.86);color:#fff} .productBody{padding:16px 10px 12px;display:flex;flex-direction:column;flex:1} .productTop{display:flex;justify-content:space-between;gap:12px;align-items:start} .product h3{font-family:var(--serif);font-size:1.12rem;margin:0 0 5px;line-height:1.25; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .price{font-weight:900;white-space:nowrap;font-size:1rem} .price .apd{display:block;font-size:.62rem;font-weight:600;color:#8b7a90;letter-spacing:.04em;text-transform:uppercase} .prixDemande{font-weight:800;font-size:.8rem;color:#8b7a90;white-space:nowrap} .productMeta{color:#746478;font-size:.78rem;line-height:1.5;margin:6px 0 12px} .productPied{margin-top:auto;display:flex;align-items:center;gap:8px} .swatches{display:flex;gap:7px} .swatch{width:17px;height:17px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)} .voir{margin-left:auto;background:var(--plum);color:#fff;border-radius:999px;padding:9px 14px;font-weight:800;font-size:.78rem} /* ── recit editorial ───────────────────────────────────────────────────── */ .story{margin:92px auto;display:grid;grid-template-columns:1.08fr .92fr;gap:18px} .storyPhoto{min-height:560px;border-radius:36px;overflow:hidden;position:relative} .storyPhoto img{width:100%;height:100%;object-fit:cover} /* La photo vient du catalogue : elle peut etre claire ou sombre. Sans ce voile, la legende disparait sur les photos sur fond blanc. */ .storyPhoto::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(25,14,28,.72))} .storyPhoto figcaption{z-index:2} .storyPhoto figcaption{position:absolute;left:28px;bottom:28px;max-width:390px;color:#fff;font-family:var(--serif);font-size:clamp(2rem,4vw,3.5rem);line-height:.98;text-shadow:0 3px 22px rgba(0,0,0,.35)} .storyCopy{border-radius:36px;background:var(--plum);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between} .storyCopy h2{font-family:var(--serif);font-size:clamp(2.2rem,4vw,4rem);line-height:.98;letter-spacing:-.04em;margin:12px 0} .storyCopy p{color:rgba(255,255,255,.72);line-height:1.75} .storyQuote{border-top:1px solid rgba(255,255,255,.15);padding-top:26px;margin-top:36px;font-family:var(--serif);font-size:1.25rem;color:var(--rose)} /* ── etapes ────────────────────────────────────────────────────────────── */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative} .steps::before{content:"";position:absolute;left:8%;right:8%;top:48px;height:2px;background:linear-gradient(90deg,var(--rose2),var(--sage),var(--yellow),var(--rose2));opacity:.5} .step{position:relative;background:#fff;border:1px solid var(--line);border-radius:26px;padding:24px;text-align:center} .stepNum{position:relative;z-index:2;width:52px;height:52px;border-radius:50%;margin:0 auto 16px;background:var(--cream);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--serif);font-weight:900;color:var(--rose2);font-size:1.25rem} .step h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 7px} .step p{font-size:.78rem;color:#756579;line-height:1.55;margin:0} /* ── bandeau de reassurance ────────────────────────────────────────────── */ .rassure{margin:90px auto 0;border-radius:36px;padding:48px;background:linear-gradient(135deg,#fff,var(--cream));border:1px solid var(--line)} .rassureTop{text-align:center;max-width:720px;margin:auto} .rassureTop h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.04em;margin:8px 0} .rassureTop p{color:#716176;line-height:1.7} .rassureGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:32px} .rassureItem{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;text-align:center} .rassureItem svg{width:30px;height:30px;margin:0 auto 12px;display:block;fill:none;stroke:var(--mauve);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .rassureItem strong{display:block;font-family:var(--serif);font-size:1.05rem;margin-bottom:6px} .rassureItem span{font-size:.79rem;color:#6b5b70;line-height:1.55} /* ── FAQ ───────────────────────────────────────────────────────────────── */ .faq{margin:90px auto;background:var(--cream);border:1px solid var(--line);border-radius:36px;padding:40px} .faq h2{font-family:var(--serif);font-size:clamp(2.1rem,4vw,3.5rem);letter-spacing:-.04em;margin:8px 0 20px} details{background:#fff;border:1px solid var(--line);border-radius:18px;margin-top:10px;overflow:hidden} summary{padding:18px 46px 18px 20px;cursor:pointer;font-weight:800;list-style:none;position:relative} summary::-webkit-details-marker{display:none} summary::after{content:"";position:absolute;right:20px;top:50%;width:13px;height:13px;margin-top:-7px; background:linear-gradient(var(--rose2),var(--rose2)) center/13px 2.4px no-repeat, linear-gradient(var(--rose2),var(--rose2)) center/2.4px 13px no-repeat; transition:transform .2s} details[open] summary::after{transform:rotate(45deg)} .answer{padding:0 20px 20px;color:#6b5b70;line-height:1.7;font-size:.88rem} .answer p:first-child{margin-top:0} .answer ul{padding-left:20px} /* ── fil d ariane ──────────────────────────────────────────────────────── */ /* `margin:26px 0 18px` ecrasait le `margin:auto` de `.wrap` pose sur le meme element : le fil d Ariane se collait au bord gauche. */ .fil{font-size:.76rem;color:#8a7a8f;margin:26px auto 18px;display:flex;gap:7px;flex-wrap:wrap;align-items:center} .fil a{border-bottom:1px solid transparent} .fil a:hover{border-color:var(--rose2)} .fil span[aria-current]{color:var(--plum);font-weight:700} /* ── en-tete de collection / archive ───────────────────────────────────── */ .pageHead{background:var(--plum);color:#fff;border-radius:34px;padding:44px;position:relative;overflow:hidden;margin-bottom:26px} .pageHead::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-130px;top:-150px;background:var(--rose);opacity:.13} .pageHead>*{position:relative} .pageHead h1{font-family:var(--serif);font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:-.04em;margin:12px 0 10px;max-width:820px} .pageHead p{color:rgba(255,255,255,.75);line-height:1.7;max-width:660px;margin:0} .pageHead .compte{margin-top:16px;display:inline-block;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 13px;font-size:.75rem} .barreTri{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:20px} .barreTri .libelle{font-size:.78rem;color:#7b6b80;font-weight:700} .triLien{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;font-size:.78rem;font-weight:700;color:#6b5b70} .triLien[aria-current="true"]{background:var(--plum);color:#fff;border-color:var(--plum)} .pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:40px 0 10px;align-items:center} .pagination a,.pagination span{min-width:42px;height:42px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem} .pagination [aria-current="page"]{background:var(--plum);color:#fff;border-color:var(--plum)} .pagination .ellipse{border:0;background:none;min-width:22px} .vide{background:#fff;border:1px dashed #cfbfb4;border-radius:28px;padding:44px;text-align:center;color:#6b5b70} /* ── fiche produit ─────────────────────────────────────────────────────── */ .fiche{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start;margin-bottom:40px} .galerie{position:sticky;top:96px} .galeriePrincipale{position:relative;border-radius:32px;overflow:hidden;background:var(--cream);border:1px solid var(--line);aspect-ratio:1/1} .galeriePrincipale img{width:100%;height:100%;object-fit:contain} .galFleche{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;color:var(--plum);box-shadow:0 6px 18px rgba(45,30,50,.12)} .galFleche svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .galPrec{left:14px} .galSuiv{right:14px} .galCompteur{position:absolute;right:14px;bottom:14px;background:rgba(45,30,50,.82);color:#fff;border-radius:999px;padding:6px 12px;font-size:.74rem;font-weight:700} .vignettes{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap} .vignette{width:66px;height:66px;border-radius:16px;overflow:hidden;border:2px solid transparent;background:var(--cream);cursor:pointer;padding:0} .vignette img{width:100%;height:100%;object-fit:cover} .vignette[aria-current="true"]{border-color:var(--plum)} .ficheInfo h1{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.03em;margin:10px 0 12px} .ficheNomLong{color:#7b6b80;font-size:.84rem;line-height:1.6;margin:0 0 18px} .pilStock{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 12px;font-size:.74rem;font-weight:800;background:var(--sage2);color:#31532a} .pilStock.rupture{background:#f4e3e6;color:#8a3247} .pilStock .pastille{width:7px;height:7px;border-radius:50%;background:currentColor} .fichePrix{font-family:var(--serif);font-size:2.5rem;font-weight:900;margin:18px 0 4px;letter-spacing:-.03em} .fichePrixNote{font-size:.78rem;color:#8b7a90;margin:0 0 22px} .axe{margin-bottom:18px} .axe .axeTitre{font-weight:800;font-size:.82rem;margin-bottom:9px;display:block} .axe .axeTitre em{font-style:normal;font-weight:500;color:#8b7a90} .axeOptions{display:flex;gap:8px;flex-wrap:wrap} .axeOption{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;cursor:pointer;font-size:.8rem;font-weight:600;color:var(--plum);transition:.18s} .axeOption:hover{border-color:var(--plum)} .axeOption[aria-pressed="true"]{background:var(--plum);color:#fff;border-color:var(--plum)} .axeOption[disabled]{opacity:.36;cursor:not-allowed;text-decoration:line-through} .ficheAchat{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:26px 0 10px} .quantite{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff;overflow:hidden} .quantite button{width:42px;height:46px;border:0;background:none;cursor:pointer;font-size:1.15rem;color:var(--plum)} .quantite input{width:48px;height:46px;border:0;text-align:center;font-weight:800;background:none;color:var(--plum);-moz-appearance:textfield} .quantite input::-webkit-outer-spin-button,.quantite input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .btnAchat{flex:1;min-width:230px;justify-content:center;text-align:center} .btnAchat[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none} .ficheNote{font-size:.78rem;color:#8b7a90;margin:0 0 26px;line-height:1.6} .ficheRassure{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:26px 0} .ficheRassure div{display:flex;gap:10px;align-items:flex-start;background:var(--cream);border:1px solid rgba(45,30,50,.07);border-radius:18px;padding:14px} .ficheRassure svg{width:20px;height:20px;flex:none;margin-top:2px;fill:none;stroke:var(--mauve);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ficheRassure strong{display:block;font-size:.82rem;margin-bottom:2px} .ficheRassure span{font-size:.74rem;color:#7b6b80;line-height:1.5} .paiements{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px} .paiements img,.paiements svg{height:26px;width:auto;border-radius:5px} .paiementsNote{font-size:.72rem;color:#8b7a90;margin:0} /* ── contenu redactionnel ──────────────────────────────────────────────── */ .prose{line-height:1.78;color:#4b3d50;font-size:.97rem} .prose h2{font-family:var(--serif);font-size:1.7rem;letter-spacing:-.02em;margin:34px 0 12px;line-height:1.2} .prose h3{font-family:var(--serif);font-size:1.25rem;margin:26px 0 10px} .prose h4{font-size:1rem;margin:20px 0 8px} .prose p{margin:0 0 15px} .prose ul,.prose ol{padding-left:22px;margin:0 0 16px} .prose li{margin-bottom:7px} .prose a{color:var(--plum);border-bottom:1px solid var(--rose2)} .prose img{border-radius:20px;margin:20px 0} .prose blockquote{margin:22px 0;padding:18px 22px;background:var(--cream);border-left:4px solid var(--rose2);border-radius:0 18px 18px 0} .prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.88rem} .prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top} .prose th{background:var(--cream);font-weight:800} .tableWrap{overflow-x:auto;margin:20px 0} .caracteristiques{width:100%;border-collapse:collapse;font-size:.88rem} .caracteristiques th{width:36%;text-align:left;font-weight:700;color:#6b5b70;padding:10px 14px;background:var(--cream);border:1px solid var(--line)} .caracteristiques td{padding:10px 14px;border:1px solid var(--line)} /* ── article de blog ───────────────────────────────────────────────────── */ .article{max-width:760px;margin:0 auto} .articleHead{text-align:center;margin-bottom:30px} .articleHead h1{font-family:var(--serif);font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.06;letter-spacing:-.035em;margin:14px 0} .articleMeta{font-size:.78rem;color:#8a7a8f} .articleImage{border-radius:32px;overflow:hidden;margin:0 0 34px;border:1px solid var(--line)} .articleImage img{width:100%;height:auto} .carteArticle{background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;transition:.28s;display:flex;flex-direction:column} .carteArticle:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(45,30,50,.08)} .carteArticle .vignetteArt{height:180px;background:var(--cream);overflow:hidden} .carteArticle .vignetteArt img{width:100%;height:100%;object-fit:cover} .carteArticle .corps{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1} .carteArticle h3{font-family:var(--serif);font-size:1.12rem;line-height:1.25;margin:0 0 8px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .carteArticle time{font-size:.72rem;color:#8a7a8f;margin-top:auto} /* ── recherche ─────────────────────────────────────────────────────────── */ .champRecherche{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px} .champRecherche input{flex:1;min-width:240px;padding:15px 20px;border-radius:999px;border:1px solid var(--line);background:#fff} .resultatsInfo{font-size:.84rem;color:#7b6b80;margin-bottom:18px} /* ── pied de page ──────────────────────────────────────────────────────── */ footer{margin-top:20px;background:var(--plum);color:#fff;border-radius:38px 38px 0 0;padding:52px 0} .footerGrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px} .footerGrid p,.footerGrid a{color:rgba(255,255,255,.68);font-size:.82rem;line-height:1.7} .footerGrid a:hover{color:#fff} .footerTitle{font-family:var(--serif);font-size:2rem;margin-bottom:12px} .footerCol{display:grid;align-content:start;gap:8px} .footerCol strong{margin-bottom:5px;color:#fff;font-size:.85rem} .footerBottom{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:18px;display:flex;justify-content:space-between;gap:14px;font-size:.72rem;color:rgba(255,255,255,.5);flex-wrap:wrap} /* ── responsive ────────────────────────────────────────────────────────── */ @media(max-width:1050px){ .navlinks{display:none} .heroGrid,.manifesto,.finderGrid,.story,.fiche{grid-template-columns:1fr} .heroVisual{min-height:600px;max-width:650px} .products{grid-template-columns:1fr 1fr} .rassureGrid{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr} .steps::before{display:none} .footerGrid{grid-template-columns:1fr 1fr} .galerie{position:static} } @media(max-width:720px){ .wrap,.topbar,.nav{width:min(100% - 24px,1280px)} .topbar{font-size:.72rem;padding:9px 14px} .topbar .mini{display:none} .nav{top:6px} .hero{padding:48px 0 60px} .hero h1{font-size:clamp(2.6rem,13vw,4.2rem)} .heroGrid{gap:28px} .heroVisual{min-height:470px} .heroCard{width:88%;height:430px;right:5%} .fb1{left:2px} .fb2{right:0} .fb3{display:none} .stamp{right:0;width:90px;height:90px;font-size:.68rem} .manifestoDark,.manifestoLight,.finder,.storyCopy,.rassure,.faq,.pageHead{padding:26px} .manifestoLight{grid-template-columns:1fr} .finderTop,.sectionHead{display:block} .sectionHead .lienTout{display:inline-block;margin-top:14px} .recCard{grid-template-columns:1fr} .recArt{height:150px} .bento>*{grid-column:span 12!important} .tHero,.tBag{min-height:390px} .products,.rassureGrid,.steps,.footerGrid,.ficheRassure{grid-template-columns:1fr} .storyPhoto{min-height:430px} .footerBottom{display:block} .grille{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .grille .productImg{height:150px} .grille .product{padding:8px;border-radius:20px} .grille .productBody{padding:12px 6px 8px} .grille .productTop{display:block} .grille .price{margin-top:6px;font-size:.92rem} .grille h3{font-size:.9rem} .marqueeWrap{margin-bottom:52px} } /* ── ajouts : elements introduits par les gabarits ─────────────────────── */ .galerieVide{width:100%;height:100%;display:grid;place-items:center;color:#8b7a90;font-size:.85rem} .paiementBadge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px solid var(--line); border-radius:6px;background:#fff;font-size:.68rem;font-weight:800;letter-spacing:.02em;color:var(--plum)} .chipsRow .chip b{margin-left:6px;color:var(--mauve);font-weight:800} .chipsRow .chip:hover b{color:var(--rose)} .recherche-haut{display:contents} /* `[hidden]` est un simple `display:none` de la feuille par defaut : toute regle qui donne un `display` a l element l emporte. Les cartes du Easy Finder sont en `display:grid` — sans cette ligne, les neuf s affichent. */ [hidden]{display:none!important} /* ── sommaire des articles ───────────────────────────────────────────────── Chaque guide s ouvre sur un « Sommaire ». Il etait rendu en liste a puces sans liens : la premiere version du nettoyage retirait les `` et les `id`, donc 17 532 ancres. Ils sont retablis ; voici leur mise en forme. */ .sommaire{ background:var(--cream);border:1px solid var(--line);border-left:4px solid var(--rose2); border-radius:22px;padding:24px 26px;margin:0 0 32px } .sommaire h2{font-family:var(--serif);font-size:1.15rem;margin:0 0 14px;letter-spacing:-.01em} .sommaire ul{list-style:none;padding:0;margin:0;counter-reset:som} .sommaire li{counter-increment:som;margin:0} .sommaire li+li{border-top:1px dashed rgba(45,30,50,.13)} .sommaire a{ display:flex;gap:12px;align-items:baseline;padding:9px 2px; font-size:.9rem;line-height:1.45;color:#4b3d50;border:0;transition:.16s } .sommaire a::before{ content:counter(som,decimal-leading-zero); font-family:var(--serif);font-weight:800;font-size:.78rem;color:var(--rose2); flex:none;min-width:1.6em } .sommaire a:hover{color:var(--plum);transform:translateX(3px)} .sommaire a:hover::before{color:var(--mauve)} /* La navigation est collante : sans marge de defilement, une ancre ferait arriver le titre vise SOUS la barre. */ .prose :where(h2,h3,h4)[id]{scroll-margin-top:110px} /* Les liens du corps des articles. Ils viennent du WordPress : 9 669 pointent vers le site, 19 vers l exterieur. */ .prose a{color:var(--plum);border-bottom:1px solid var(--rose2);transition:.15s} .prose a:hover{background:rgba(239,203,211,.35);border-bottom-color:var(--plum)} /* Le corps d article : une seule colonne centree, mesure de lecture tenue. */ .article{max-width:760px;margin-left:auto;margin-right:auto} .prose>ul,.prose>ol{margin-left:0} .prose table{display:table} .prose section{margin:0} .prose div{margin:0} /* L en-tete : trois icones puis l appel a l action. Sous 720 px, l appel disparait pour laisser la place au compte et au panier, qui sont les deux raisons pour lesquelles on revient sur une boutique. */ @media(max-width:720px){ .navActions .pillBtn{display:none} .navActions{gap:6px} .iconBtn{width:38px;height:38px} } /* ══════════════════════════════════════════════════════════════════════════ Le panier lateral Le site est statique : le panier vit dans le navigateur du visiteur. Le tiroir est ecrit dans chaque page — si le script echoue, le bouton reste inerte, mais aucune page n est cassee. ══════════════════════════════════════════════════════════════════════════ */ .iconPanier{position:relative} .pastillePanier{ position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px; border-radius:999px;background:var(--rose2);color:var(--plum); font-size:.64rem;font-weight:800;display:grid;place-items:center; border:2px solid #fff;line-height:1 } .panierVoile{ position:fixed;inset:0;z-index:120;background:rgba(30,17,33,.45); backdrop-filter:blur(2px);opacity:0;transition:opacity .28s } .panierVoile[data-ouvert]{opacity:1} .panierTiroir{ position:fixed;top:0;right:0;bottom:0;z-index:130; width:min(420px,100%);background:#fff; border-left:1px solid var(--line);box-shadow:-24px 0 60px rgba(45,30,50,.22); display:flex;flex-direction:column; transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1) } .panierTiroir[data-ouvert]{transform:translateX(0)} /* Le fond ne doit pas defiler derriere le tiroir ouvert. */ .panier-ouvert,.panier-ouvert body{overflow:hidden} .panierEntete{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:22px 24px;border-bottom:1px solid var(--line);flex:none } .panierEntete h2{font-family:var(--serif);font-size:1.4rem;margin:0;letter-spacing:-.02em} .panierFermer{ width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--cream); cursor:pointer;font-size:1.4rem;line-height:1;color:var(--plum);flex:none } .panierFermer:hover{background:var(--plum);color:#fff;border-color:var(--plum)} .panierListe{list-style:none;margin:0;padding:8px 24px;overflow-y:auto;flex:1} .panierLigne{display:grid;grid-template-columns:72px 1fr 26px;gap:14px;align-items:start;padding:16px 0} .panierLigne+.panierLigne{border-top:1px solid var(--line)} .panierVignette{ width:72px;height:72px;border-radius:16px;overflow:hidden;background:var(--cream); border:1px solid var(--line);display:block } .panierVignette img{width:100%;height:100%;object-fit:cover} .panierCorps{min-width:0} .panierTitre{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-size:.85rem;line-height:1.35;font-weight:600;color:var(--plum) } .panierTitre:hover{color:var(--mauve)} .panierOption{display:block;font-size:.72rem;color:#8b7a90;margin-top:3px} .panierBas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px} .panierQte{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden} .panierQte button{width:28px;height:30px;border:0;background:none;cursor:pointer;color:var(--plum);font-size:1rem} .panierQte button:hover{background:var(--cream)} .panierQte span{min-width:24px;text-align:center;font-weight:800;font-size:.82rem} .panierPrix{font-weight:900;font-size:.9rem;white-space:nowrap} .panierRetirer{ border:0;background:none;cursor:pointer;color:#a898ad;font-size:1.3rem;line-height:1; padding:0;width:26px;height:26px;border-radius:50% } .panierRetirer:hover{background:var(--cream);color:var(--plum)} .panierVide{padding:44px 24px;text-align:center;color:#6b5b70;flex:1;display:flex; flex-direction:column;justify-content:center;gap:6px} .panierVide strong{font-family:var(--serif);font-size:1.15rem;color:var(--plum)} .panierVide p{margin:0;font-size:.88rem;line-height:1.6} .panierVide .cta{margin:18px auto 0} .panierPied{padding:20px 24px 24px;border-top:1px solid var(--line);background:var(--cream);flex:none} .panierTotal{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px} .panierTotal span{font-size:.86rem;color:#6b5b70} .panierTotal strong{font-family:var(--serif);font-size:1.6rem;letter-spacing:-.02em} .panierMention{font-size:.72rem;color:#8b7a90;margin:0 0 14px;line-height:1.5} .panierCommander{width:100%;justify-content:center} .panierCommander[aria-disabled="true"]{opacity:.45;pointer-events:none} .panierNote{font-size:.72rem;color:#8b7a90;margin:12px 0 0;line-height:1.5} .panierLienSecondaire{ display:block;text-align:center;margin-top:12px;font-size:.76rem;color:#7b6b80; border-bottom:1px solid transparent } .panierLienSecondaire:hover{border-bottom-color:var(--rose2)} @media(max-width:520px){ .panierTiroir{width:100%} .panierLigne{grid-template-columns:60px 1fr 24px;gap:11px} .panierVignette{width:60px;height:60px} } /* ══════════════════════════════════════════════════════════════════════════ En-tete : la recherche toujours ouverte La pastille de la maquette passe sur deux lignes : logo / recherche / actions, puis les rayons. Le champ garde le centre a toutes les largeurs. ══════════════════════════════════════════════════════════════════════════ */ .nav{flex-direction:column;gap:0;padding:12px 18px 10px} /* `1fr auto 1fr` : les deux colonnes laterales sont egales, donc la barre de recherche est centree sur le conteneur — et non sur l espace restant entre le logo et les actions, qui n ont pas la meme largeur. */ .navHaut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px) minmax(0,1fr);align-items:center;gap:20px;width:100%} .navHaut .logo{justify-self:start;min-width:0} .navActions{justify-self:end} .barreRecherche{ display:flex;align-items:center;gap:9px;min-width:0;width:100%; background:var(--cream);border:1px solid var(--line);border-radius:999px; padding:0 6px 0 16px;height:44px;transition:.18s } .barreRecherche:focus-within{ border-color:var(--rose2);background:#fff; box-shadow:0 0 0 4px rgba(232,168,184,.22) } .barreLoupe{display:grid;place-items:center;flex:none;color:var(--mauve)} .barreLoupe svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .barreRecherche input{ flex:1;min-width:0;border:0;background:none;outline:none; font-size:.86rem;color:var(--ink);height:100% } .barreRecherche input::placeholder{color:#9a89a0} /* Chrome pose sa propre croix, qui ne suit pas la palette. */ .barreRecherche input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .barreRecherche button{ flex:none;border:0;border-radius:999px;background:var(--plum);color:#fff; font-weight:700;font-size:.78rem;padding:0 15px;height:34px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center } .barreRecherche button svg{display:none;width:16px;height:16px;fill:none; stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .barreRecherche button:hover{background:var(--plum2)} .navlinks{ width:100%;margin:0;justify-content:center; padding-top:10px;margin-top:10px;border-top:1px solid rgba(45,30,50,.07) } @media(max-width:1050px){ /* La rangee defilait horizontalement et coupait « Trouver ma pousse|tte » en plein mot, sans rien indiquer qu elle defilait. On ne garde que le declencheur du panneau, qui contient desormais tout. */ .navlinks{display:flex;gap:10px;font-size:.82rem;justify-content:center} .navlinks>a{display:none} .navlinks .rayon{flex:1} .rayonBtn{ width:100%;justify-content:center;background:var(--cream); border:1px solid var(--line);border-radius:999px;height:38px; font-weight:700;color:var(--plum) } /* `.navlinks` defile horizontalement, ce qui rogne tout enfant en position absolue. Le panneau passe donc en position fixe, ancre sous la barre, et occupe la largeur disponible. */ .rayonPanneau{ position:fixed;left:12px;right:12px;top:auto;width:auto;transform:translateY(8px); grid-template-columns:repeat(2,1fr); max-height:min(64vh,calc(100vh - 200px)) } .rayon:hover .rayonPanneau,.rayon:focus-within .rayonPanneau{transform:translateY(0)} } @media(max-width:720px){ .rayonPanneau{grid-template-columns:1fr;max-height:min(58vh,calc(100vh - 230px))} .rayonGroupe strong{font-size:.92rem} .rayonGroupe a{padding:6px 0;font-size:.86rem} .nav{padding:10px 12px 8px} .navHaut{grid-template-columns:auto 1fr;gap:10px} .barreRecherche{grid-column:1/-1;grid-row:2;width:100%;margin:8px 0 0;height:40px} .barreRecherche button{padding:0 12px;font-size:.74rem} .navActions{margin-left:auto} } /* ══════════════════════════════════════════════════════════════════════════ Espace client ══════════════════════════════════════════════════════════════════════════ */ .compteGrille{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;margin-bottom:20px} .compteCarte{ background:#fff;border:1px solid var(--line);border-radius:30px;padding:34px; display:flex;flex-direction:column } .compteCartePrincipale{ background:var(--plum);color:#fff;position:relative;overflow:hidden;border-color:transparent } .compteCartePrincipale::after{ content:"";position:absolute;width:280px;height:280px;border-radius:50%; right:-120px;bottom:-150px;background:var(--rose);opacity:.13 } .compteCartePrincipale>*{position:relative} .compteCarte h2{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.2rem); letter-spacing:-.03em;margin:10px 0 12px;line-height:1.06} .compteCarte p{line-height:1.7;color:#5f5064;margin:0 0 14px;font-size:.92rem} .compteCartePrincipale p{color:rgba(255,255,255,.78)} .compteBouton{align-self:flex-start;margin-top:auto} .compteNote{font-size:.76rem!important;color:#8b7a90!important;margin-top:14px!important} .compteCartePrincipale .compteNote{color:rgba(255,255,255,.6)!important} .compteLienSecondaire{ display:inline-block;margin-top:4px;font-size:.78rem;color:var(--rose); border-bottom:1px solid rgba(239,203,211,.4) } .compteServices{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .compteService{ display:flex;gap:14px;align-items:flex-start;background:var(--cream); border:1px solid rgba(45,30,50,.07);border-radius:22px;padding:20px 22px } .compteService svg{width:22px;height:22px;flex:none;margin-top:3px;fill:none; stroke:var(--mauve);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .compteService strong{display:block;font-family:var(--serif);font-size:1.05rem;margin-bottom:5px} .compteService span{font-size:.82rem;color:#6b5b70;line-height:1.6} .compteAide{ margin:60px auto 0;background:linear-gradient(135deg,var(--sand),#fff); border:1px solid var(--line);border-radius:32px;padding:36px; display:flex;justify-content:space-between;gap:26px;align-items:center;flex-wrap:wrap } .compteAide h2{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.03em;margin:8px 0 6px;line-height:1.1} .compteAide p{margin:0;color:#6b5b70;font-size:.88rem} .compteAideLiens{display:flex;gap:9px;flex-wrap:wrap} @media(max-width:900px){ .compteGrille,.compteServices{grid-template-columns:1fr} } /* Sous 520 px, le mot « Rechercher » prend la place du texte saisi : le bouton devient une loupe ronde, et la loupe decorative de gauche s efface pour ne pas la doubler. */ @media(max-width:520px){ .barreRecherche{padding-left:12px;gap:6px} .barreLoupe{display:none} .barreRecherche button{width:34px;padding:0} .barreRecherche button .barreTexte{display:none} .barreRecherche button svg{display:block} .topbar{font-size:.68rem;padding:8px 12px;gap:10px} } /* Le groupe « Repères » ferme le panneau : il regroupe ce qui n est pas un rayon. Un liseré le distingue sans le mettre à part. */ .rayonGroupeReperes{ border-top:1px dashed rgba(45,30,50,.14);padding-top:14px; grid-column:1/-1;display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px 22px } .rayonGroupeReperes strong{grid-column:1/-1} @media(max-width:720px){ .rayonGroupeReperes{grid-template-columns:1fr} } @media (max-width:359px){.logo .logoPlein{display:none}.logo .logoSeul{display:block}}