/* ===================================================================== FICHE MEMENTO — le modele valide le 09/10, a l'identique. Le modele s'affichait seul ; sur le site il vit dans le theme. Pour qu'il reste identique : #mm-memento repart de zero, ses descendants reviennent aux styles du navigateur (aucune regle du theme ne passe), puis la feuille du modele s'applique. Les icones SVG sont exclues de la remise a zero : leur dessin vit dans des attributs que `revert` effacerait. ===================================================================== */ #mm-memento{all:initial;display:block} #mm-memento :not(:where(svg,svg *)),#mm-memento *::before,#mm-memento *::after{all:revert} #mm-memento img{max-width:100%} #mm-memento [hidden]{display:none!important} /* ============================================================ Variables, polices et rayons RELEVES SUR LA VRAIE FICHE #mmv-page le 08/10/2026 — rien d'inventé ici. ============================================================ */ #mm-memento{ --char:#2c2925; --clay:#c8a882; --sand:#f5f0ea; --warm:#fdfaf6; --accent:#8b6b4a; --mid:#6b5f52; --border:#e8e0d5; --muted:#a89a88; --or-fin:rgba(200,168,130,.38); } #mm-memento *{box-sizing:border-box} #mm-memento{scroll-behavior:smooth} #mm-memento{margin:0;background:#efe9df;font-family:'Jost',system-ui,sans-serif;font-weight:300;color:var(--char);line-height:1.6;-webkit-font-smoothing:antialiased} #mm-memento img{max-width:100%;height:auto;display:block} #mm-memento a{color:var(--accent)} /* bandeau de l'aperçu, hors fiche */ #mm-memento .apercu-tete{background:var(--char);color:#f3ece2;padding:16px 4vw;font-size:.76rem;letter-spacing:.04em} #mm-memento .apercu-tete b{color:var(--clay);font-weight:500} #mm-memento .apercu-tete span{color:#b8ae9f} #mm-memento #mmv-page{background:var(--warm);max-width:1600px;margin:0 auto} /* fil d'Ariane */ #mm-memento nav.bc{max-width:1400px;margin:0 auto;padding:18px 3vw 0;font-size:.68rem;color:var(--muted);letter-spacing:.03em} #mm-memento nav.bc a{color:var(--muted);text-decoration:none} #mm-memento nav.bc a:hover{color:var(--accent)} #mm-memento nav.bc i{font-style:normal;padding:0 7px;color:var(--border)} /* ---------- MISE EN PAGE : grid 1fr 1fr, gap 44px, max 1400px ---------- */ #mm-memento .product-layout{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start; width:100%;max-width:1400px;margin:0 auto;padding:30px 3vw 48px} /* ---------- GALERIE : carré, rayon 6px, fond sable ---------- */ #mm-memento .gallery{position:relative;width:100%} #mm-memento .gallery-main{background:var(--sand);border-radius:6px;aspect-ratio:1/1;overflow:hidden;position:relative; border:1px solid var(--or-fin)} #mm-memento .gallery-main img{width:100%;height:100%;object-fit:cover} #mm-memento .gallery-badge{position:absolute;top:12px;left:12px;background:#fff;color:var(--accent); font-size:.62rem;padding:4px 10px;border-radius:20px;letter-spacing:.05em;z-index:2; box-shadow:0 1px 4px rgba(44,41,37,.08)} #mm-memento .gallery-badge.sombre{background:var(--char);color:var(--clay)} #mm-memento .gallery-zoom{position:absolute;bottom:12px;right:12px;width:36px;height:36px;border-radius:50%; background:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:0 2px 8px rgba(44,41,37,.12);color:var(--accent);font-size:.9rem} #mm-memento .gallery-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none} #mm-memento .gallery-thumbs::-webkit-scrollbar{display:none} #mm-memento .thumb{width:calc((100% - 40px)/6);aspect-ratio:1/1;flex:0 0 auto;background:var(--sand); border-radius:5px;border:1px solid transparent;cursor:pointer;overflow:hidden;padding:0} #mm-memento .thumb img{width:100%;height:100%;object-fit:cover} #mm-memento .thumb.active{border-color:var(--clay)} /* ---------- CADRE D'ACHAT ---------- */ #mm-memento .p-marque{font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin-bottom:7px} #mm-memento h1.product-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400; font-size:clamp(1.4rem,1.9vw,1.85rem);line-height:1.15;margin:0 0 8px;color:var(--char)} #mm-memento .etoiles{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px} #mm-memento .et{color:var(--clay);letter-spacing:1px;font-size:.95rem} #mm-memento .et i{font-style:normal;color:var(--border)} #mm-memento .rating-link{font-size:.76rem;color:#8b6b4a;text-decoration:underline; text-decoration-color:var(--border);text-underline-offset:2px;cursor:pointer;background:none;border:none;font-family:inherit} #mm-memento .resume{margin:-2px 0 16px;font-size:.84rem;line-height:1.55;color:var(--mid)} #mm-memento .product-price{display:flex;align-items:baseline;gap:8px;margin:2px 0 4px;flex-wrap:wrap} #mm-memento .price-current{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:clamp(1.6rem,2vw,2.15rem);color:var(--char)} #mm-memento .price-ttc{font-size:.68rem;color:var(--muted);margin-bottom:16px} #mm-memento .price-rangee{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px} #mm-memento .price-align{background:var(--sand);border-radius:8px;padding:9px 12px;font-size:.7rem;color:var(--char); flex:1;min-width:200px;display:flex;align-items:center;gap:8px} #mm-memento .price-align b{font-weight:500} #mm-memento .mm-alma-pills{display:flex;gap:6px;margin:0 0 20px;flex-wrap:wrap} #mm-memento .mm-alma-pill{border:1px solid var(--border);background:#fff;border-radius:20px;padding:5px 13px; font-size:.72rem;font-family:'Jost',sans-serif;color:var(--mid);cursor:pointer} #mm-memento .mm-alma-pill.active{background:var(--char);border-color:var(--char);color:var(--warm)} /* ---------- COLORIS : le mur des 27 fauteuils, filtre de collections au-dessus ---------- */ #mm-memento .mm-sw{margin:0 0 22px} #mm-memento .mm-sw-titre{font:400 12px/1.4 Jost,sans-serif;letter-spacing:.02em;color:#6b5f52;margin-bottom:11px} #mm-memento .mm-sw-titre b{font:600 10px/1 Jost,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8b6b4a;margin-right:6px} #mm-memento .mm-sw-actuel{color:#2c2925} /* le filtre : des pastilles discrètes, le seul marqueur de collection */ #mm-memento .filtre{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--border)} #mm-memento .filtre button{appearance:none;background:transparent;border:1px solid var(--border);color:var(--mid); font-family:'Jost',sans-serif;font-size:.72rem;padding:5px 12px;cursor:pointer;border-radius:20px;white-space:nowrap; transition:border-color .15s,color .15s,background .15s} #mm-memento .filtre button b{font-weight:500;color:inherit} #mm-memento .filtre button sup{font-size:.58rem;margin-left:4px;opacity:.7;vertical-align:super} #mm-memento .filtre button:hover{border-color:var(--clay);color:var(--char)} #mm-memento .filtre button[aria-pressed="true"]{background:var(--char);border-color:var(--char);color:var(--warm)} #mm-memento .filtre button:focus-visible{outline:2px solid var(--clay);outline-offset:2px} /* le mur : la grille ne se coupe jamais */ #mm-memento .mur{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px} #mm-memento .v{appearance:none;padding:0;aspect-ratio:1/1;width:100%;overflow:hidden;cursor:pointer; background:var(--sand);border:1px solid var(--border);border-radius:5px; transition:border-color .15s,box-shadow .15s,transform .15s} #mm-memento .v img{width:100%;height:100%;object-fit:cover;display:block} #mm-memento .v:hover{border-color:var(--clay);transform:translateY(-1px)} #mm-memento .v[aria-pressed="true"]{border-color:var(--char);box-shadow:0 0 0 2px #fff inset,0 0 0 2px var(--clay)} #mm-memento .v:focus-visible{outline:2px solid var(--clay);outline-offset:2px} #mm-memento .v[hidden]{display:none} #mm-memento .sous{font-size:.74rem;color:var(--mid);margin:11px 0 0;min-height:1.5em} #mm-memento .sous b{color:var(--char);font-weight:500} #mm-memento .sous code{font-size:.68rem;color:var(--muted)} /* mini-caractéristiques du coloris choisi */ #mm-memento .declin{border:1px solid var(--or-fin);border-radius:8px;padding:13px 16px;margin-bottom:20px;background:#fff} #mm-memento .declin .spec-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0; border-bottom:1px solid var(--border);font-size:.8rem} #mm-memento .declin .spec-row:last-child{border-bottom:none} #mm-memento .spec-label{color:var(--muted)} #mm-memento .spec-val{color:var(--char);text-align:right} #mm-memento .atc{display:block;width:100%;background:var(--char);color:var(--warm);border:none;border-radius:4px; padding:16px;font:500 .78rem/1 Jost,sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer} #mm-memento .atc:hover{background:#1f1c19} #mm-memento .atc-note{font-size:.68rem;color:var(--muted);text-align:center;margin:9px 0 0} #mm-memento .trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)} #mm-memento .trust div{font-size:.7rem;color:var(--mid)} #mm-memento .trust b{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:500;margin-bottom:2px} /* ---------- ONGLETS : exactement .tabs-section du site ---------- */ #mm-memento .tabs-section{width:100%;max-width:1400px;margin:0 auto 44px;background:#fff; border:1px solid var(--border);border-radius:10px;padding:24px 28px} #mm-memento .tabs-nav{display:flex;gap:22px;flex-wrap:nowrap;margin-bottom:18px;border-bottom:1px solid var(--border); overflow-x:auto;scrollbar-width:none} #mm-memento .tabs-nav::-webkit-scrollbar{display:none} #mm-memento .tab-btn{background:none;border:none;font-family:'Jost',sans-serif;font-size:.78rem;font-weight:400; letter-spacing:.16em;text-transform:uppercase;color:var(--mid);cursor:pointer;padding:0 0 12px; border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;flex-shrink:0} #mm-memento .tab-btn.active{color:var(--char);font-weight:500;border-color:var(--clay)} #mm-memento .tab-panel{display:none;font-size:.84rem;color:var(--mid);line-height:1.7;padding:14px 0 6px} #mm-memento .tab-panel.active{display:block} #mm-memento .tab-panel p, #mm-memento .tab-panel li{font-size:clamp(.88rem,1vw,.95rem);line-height:1.9;color:#6b5f52;margin-bottom:14px} #mm-memento .tab-panel strong{color:#2c2925;font-weight:500} #mm-memento .tab-panel h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400; font-size:clamp(1.3rem,2vw,1.8rem);color:var(--char);margin:30px 0 12px;line-height:1.2} #mm-memento .tab-panel h2:first-child{margin-top:4px} #mm-memento .tab-panel h2 em{font-style:italic;color:var(--accent)} #mm-memento .tab-panel h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400; font-size:clamp(1.1rem,1.6vw,1.4rem);color:var(--char);margin:24px 0 8px} #mm-memento .tab-panel h4{font:500 .72rem/1.3 Jost,sans-serif;letter-spacing:.12em;text-transform:uppercase; color:var(--accent);margin:0 0 6px} #mm-memento .tab-panel ul{padding-left:20px;margin-bottom:14px} #mm-memento .tab-panel a{color:#8b6b4a;border-bottom:1px solid var(--border);text-decoration:none} #mm-memento .chapeau{font-size:clamp(.95rem,1.1vw,1.05rem)!important;line-height:1.8;color:#4a443d!important} #mm-memento .surtitre{font:500 .64rem/1 Jost,sans-serif;letter-spacing:.2em;text-transform:uppercase; color:var(--clay);margin:0 0 7px} /* cartes à bordure dorée fine et coins arrondis */ #mm-memento .cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin:16px 0 22px} #mm-memento .carte{border:1px solid var(--or-fin);border-radius:8px;padding:14px 16px;background:#fdfaf6} #mm-memento .carte p{margin:0;font-size:.82rem!important;line-height:1.65} #mm-memento .coup-doeil{border:1px solid var(--or-fin);border-radius:8px;overflow:hidden;margin:18px 0 22px;background:#fdfaf6} #mm-memento .coup-doeil .cd-tete{background:var(--sand);padding:10px 16px;font:500 .64rem/1 Jost,sans-serif; letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} #mm-memento .coup-doeil .spec-row{display:flex;justify-content:space-between;gap:16px;padding:9px 16px; border-bottom:1px solid var(--border);font-size:.8rem} #mm-memento .coup-doeil .spec-row:last-child{border-bottom:none} #mm-memento .specs-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:0 34px} #mm-memento .specs-group-title{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent); margin:18px 0 8px;font-weight:500} #mm-memento .spec-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0; border-bottom:1px solid var(--border);font-size:.8rem} #mm-memento .spec-row:last-child{border-bottom:none} /* FAQ en accordéons (R80 : accordéon admis, pas de porteur de titre) */ #mm-memento .faq{border-top:1px solid var(--border)} #mm-memento .faq-q{border-bottom:1px solid var(--border)} #mm-memento .faq-q button{width:100%;background:none;border:none;text-align:left;cursor:pointer; padding:15px 30px 15px 0;font:400 .9rem/1.5 Jost,sans-serif;color:var(--char);position:relative} #mm-memento .faq-q button:after{content:"+";position:absolute;right:4px;top:14px;color:var(--clay);font-size:1.1rem} #mm-memento .faq-q.ouvert button:after{content:"–"} #mm-memento .faq-r{display:none;padding:0 0 16px} #mm-memento .faq-q.ouvert .faq-r{display:block} #mm-memento .faq-r p{margin:0;font-size:.86rem!important;line-height:1.85} /* avis */ #mm-memento .avis-tete{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:16px; margin-bottom:20px;border-bottom:1px solid var(--border)} #mm-memento .avis-note{font-family:'Cormorant Garamond',Georgia,serif;font-size:2.1rem;line-height:1} #mm-memento .avis-note span{font-size:1rem;color:#a89a88} #mm-memento .avis-un{padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid #f0ebe4} #mm-memento .avis-un:last-child{border-bottom:none} #mm-memento .avis-l{display:flex;align-items:center;gap:10px;margin-bottom:7px} #mm-memento .avis-l b{font-size:.82rem;font-weight:500} #mm-memento .avis-l time{font-size:.66rem;color:#b8b0a6;margin-left:auto} #mm-memento .avis-un p{margin:0;font-size:.88rem!important;line-height:1.65;color:#4a443d} /* sections pleine largeur sous les onglets */ #mm-memento .bloc{width:100%;max-width:1400px;margin:0 auto;padding:0 3vw 48px} #mm-memento .bloc h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400; font-size:clamp(1.25rem,1.9vw,1.7rem);color:var(--char);margin:0 0 6px;line-height:1.2} #mm-memento .bloc h2 em{font-style:italic;color:var(--accent)} #mm-memento .bloc .intro{font-size:.88rem;line-height:1.8;color:var(--mid);max-width:820px;margin:0 0 22px} /* photos clientes : 4/5 comme les visuels d'intérieur, rayon 8, bordure dorée fine */ #mm-memento .clientes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px} #mm-memento .cli{position:relative;aspect-ratio:4/5;border:1px solid var(--or-fin);border-radius:8px;overflow:hidden;background:var(--sand)} #mm-memento .cli img{width:100%;height:100%;object-fit:cover} #mm-memento .cli figcaption{position:absolute;inset:auto 0 0 0;padding:22px 12px 10px; background:linear-gradient(transparent,rgba(26,22,18,.82));color:#f6f1e8;font-size:.7rem;line-height:1.4} #mm-memento .cli .tag{position:absolute;top:9px;left:9px;background:#fff;color:var(--accent);font-size:.56rem; letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:20px} /* repose-pieds : la grille .related-grid du site, 5 colonnes, carré, rayon 6 */ #mm-memento .related-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} #mm-memento .related-card{text-decoration:none;color:inherit} #mm-memento .related-img{aspect-ratio:1/1;background:var(--sand);border-radius:6px;overflow:hidden;border:1px solid var(--or-fin)} #mm-memento .related-img img{width:100%;height:100%;object-fit:cover} #mm-memento .related-info{padding-top:6px} #mm-memento .related-brand{display:block;font-size:.6rem;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px} #mm-memento .related-name{display:block;font-size:.72rem;color:var(--char);line-height:1.35} #mm-memento .related-price{display:block;font-family:'Cormorant Garamond',serif;color:var(--accent);font-size:.82rem;margin-top:2px} /* collectors */ #mm-memento .collectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px} #mm-memento .collector{border:1px solid var(--or-fin);border-radius:8px;padding:15px 17px;background:#fdfaf6} #mm-memento .collector b{display:block;font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--char);font-weight:400} #mm-memento .collector .st{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:3px 0 9px} #mm-memento .collector q{font-size:.82rem;color:var(--mid);font-style:italic;line-height:1.6} /* à trancher */ #mm-memento .trancher{width:100%;max-width:1400px;margin:0 auto 60px;padding:0 3vw} #mm-memento .trancher .cadre{border:1px solid #d9c9a8;border-radius:10px;background:#fdf8ee;padding:22px 26px} #mm-memento .trancher h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.3rem;margin:0 0 4px} #mm-memento .trancher p{font-size:.84rem;line-height:1.75;color:#5c5349;margin:0 0 10px} #mm-memento .trancher ol{margin:12px 0 0;padding-left:20px} #mm-memento .trancher li{font-size:.84rem;line-height:1.8;color:#5c5349;margin-bottom:9px} #mm-memento footer{text-align:center;padding:26px 4vw 46px;font-size:.7rem;color:#8c8375} /* ===== Refonte des onglets — 09/10/2026 ===================================== Styles repris a l'identique de /fauteuil-memento-athezza/ : charbon #2c2925, or #c8a882, accent #8b6b4a, creme #fdfaf6, sable #f5f0ea, filet #e8e0d5. Aucune couleur hors charte. ========================================== */ /* --- en-tete d'onglet : surtitre + titre mis en avant --- */ #mm-memento .tab-panel .surtitre{font-family:'Jost',sans-serif;font-size:.68rem!important;letter-spacing:.22em; text-transform:uppercase;color:#c8a882!important;margin:0 0 10px!important} #mm-memento .tab-panel h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.5rem,2.4vw,2rem); font-weight:400;color:#2c2925;line-height:1.2;margin:4px 0 18px} #mm-memento .tab-panel h2 em{font-style:italic;color:#8b6b4a} /* --- titres internes : filet dore a gauche, pour decoller les paragraphes --- */ #mm-memento .tab-panel h3{font-family:'Cormorant Garamond',serif;font-size:1.28rem;font-weight:400; color:#2c2925;margin:32px 0 12px;padding-left:14px;border-left:2px solid #c8a882;line-height:1.35} #mm-memento .tab-panel h3 em{font-style:italic;color:#8b6b4a} /* --- description : de l'air entre les paragraphes --- */ #mm-memento #tab-description p{margin-bottom:24px!important} #mm-memento #tab-description .chapeau{font-family:'Cormorant Garamond',serif;font-size:1.12rem!important; font-style:italic;color:#2c2925!important;line-height:1.75!important; border-left:2px solid #c8a882;padding-left:20px;margin:18px 0 28px!important} /* --- fiche technique : intitules de groupe en bandeau --- */ #mm-memento .tab-panel .specs-group-title{font-family:'Jost',sans-serif;font-size:.68rem;letter-spacing:.18em; text-transform:uppercase;color:#fdfaf6;background:#8b6b4a;padding:7px 14px; margin:28px 0 12px;display:block} #mm-memento .tab-panel .specs-cols > div > .specs-group-title:first-child{margin-top:0} /* --- les collections : bandeau plein, comme sur la page vitrine --- */ #mm-memento .tab-panel .mm-bande{display:block;background:#8b6b4a;color:#fdfaf6;font-family:'Jost',sans-serif; font-weight:400;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase; padding:11px 20px;margin:36px 0 0} #mm-memento .tab-panel .mm-bande-sous{font-family:'Cormorant Garamond',serif;font-style:italic; font-size:1.14rem!important;color:#8b6b4a!important;margin:14px 0 10px!important;line-height:1.45!important} /* --- guide d'achat : cartes a icone cerclee --- */ #mm-memento .tab-panel .choose-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr)); gap:18px;margin-top:24px} #mm-memento .tab-panel .choose-card{border:1px solid rgba(200,168,130,.38);padding:24px;background:#f5f0ea; border-radius:8px;transition:border-color .25s} #mm-memento .tab-panel .choose-card:hover{border-color:#c8a882} #mm-memento .tab-panel .choose-card-icon{width:42px;height:42px;border:1px solid #c8a882;border-radius:50%; display:flex;align-items:center;justify-content:center;background:rgba(200,168,130,.08);margin-bottom:14px} #mm-memento .tab-panel .choose-card-icon svg{width:20px;height:20px;stroke:#8b6b4a;fill:none; stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} #mm-memento .tab-panel .choose-card h4{font-family:'Cormorant Garamond',serif;font-size:1.16rem;font-weight:400; color:#2c2925;margin:0 0 10px;line-height:1.3} #mm-memento .tab-panel .choose-card h4 em{font-style:italic;color:#8b6b4a} #mm-memento .tab-panel .choose-card p{margin-bottom:0!important;font-size:.85rem!important;line-height:1.8!important} /* --- coloris collectors : bandeau sombre pleine largeur --- */ #mm-memento #tab-collectors{background:#2c2925;border-radius:10px;padding:40px 34px 34px;margin-top:10px} #mm-memento #tab-collectors h2{color:#fdfaf6} #mm-memento #tab-collectors h2 em{color:#c8a882} #mm-memento #tab-collectors > p{color:rgba(253,250,246,.75)!important;max-width:760px} #mm-memento #tab-collectors .historic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:26px} #mm-memento #tab-collectors .historic-card{background:rgba(200,168,130,.05);border:1px solid rgba(200,168,130,.38); padding:18px;display:flex;gap:16px;align-items:center;text-align:left;border-radius:6px} #mm-memento #tab-collectors .historic-card img{width:90px;height:90px;object-fit:cover;flex-shrink:0; border:1px solid rgba(200,168,130,.38);border-radius:5px} #mm-memento #tab-collectors .historic-card-text{flex:1;min-width:0} #mm-memento #tab-collectors .historic-card-name{font-family:'Cormorant Garamond',serif;font-size:1.05rem; color:#fdfaf6;margin-bottom:4px} #mm-memento #tab-collectors .historic-card-name em{font-style:italic;color:#c8a882} #mm-memento #tab-collectors .historic-card-meta{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:rgba(200,168,130,.7);font-family:'Jost',sans-serif;margin-bottom:6px} #mm-memento #tab-collectors .historic-card-quote{font-family:'Cormorant Garamond',serif;font-style:italic; font-size:.86rem;color:rgba(253,250,246,.7);line-height:1.5} /* --- livraison & paiement : cartes numerotees --- */ #mm-memento .tab-panel .foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr)); gap:18px;margin-top:24px} #mm-memento .tab-panel .foot-card{border:1px solid rgba(200,168,130,.38);background:#f5f0ea;padding:24px;border-radius:8px} #mm-memento .tab-panel .foot-num{font-family:'Cormorant Garamond',serif;font-size:1.55rem;color:#c8a882; display:block;line-height:1;margin-bottom:12px} #mm-memento .tab-panel .foot-card h4{font-family:'Jost',sans-serif;font-size:.7rem;letter-spacing:.14em; text-transform:uppercase;color:#8b6b4a;font-weight:500;margin:0 0 10px;line-height:1.5} #mm-memento .tab-panel .foot-card p{margin-bottom:0!important;font-size:.85rem!important;line-height:1.8!important} /* --- repose-pieds : bandeau sombre, au modele de la page vitrine --- */ #mm-memento .rp{padding:64px 7vw;background:#2c2925;color:#fdfaf6;margin:0 0 48px} #mm-memento .rp-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center; max-width:1400px;margin:0 auto} #mm-memento .rp-tag{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#c8a882; display:block;margin-bottom:14px;font-family:'Jost',sans-serif} #mm-memento .rp-h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300; color:#fdfaf6;margin:0 0 18px;line-height:1.1} #mm-memento .rp-h2 em{font-style:italic;color:#c8a882} #mm-memento .rp-p{font-size:.9rem;line-height:1.85;color:rgba(253,250,246,.7);font-family:'Jost',sans-serif; font-weight:300;margin-bottom:14px} #mm-memento .rp-p strong{color:#fdfaf6;font-weight:500} #mm-memento .rp-cta{display:inline-flex;align-items:center;gap:10px;border:1px solid #c8a882;color:#c8a882; padding:12px 28px;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase; font-family:'Jost',sans-serif;font-weight:400;transition:all .2s;margin-top:12px;text-decoration:none} #mm-memento .rp-cta:hover{background:#c8a882;color:#2c2925} #mm-memento .rp-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5} #mm-memento .rp-prices{background:rgba(200,168,130,.06);border:1px solid rgba(200,168,130,.38);padding:24px} #mm-memento .rp-prices-title{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:#fdfaf6; margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(200,168,130,.2)} #mm-memento .rp-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0; border-bottom:1px solid rgba(200,168,130,.1);font-size:.82rem;font-family:'Jost',sans-serif} #mm-memento .rp-row:last-child{border-bottom:none} #mm-memento .rp-row-name{color:rgba(253,250,246,.85);font-weight:400} #mm-memento .rp-row-price{font-family:'Cormorant Garamond',serif;color:#c8a882;font-weight:500;font-size:1rem} /* ============================================================ RESPONSIVE — les 7 breakpoints maison : 1440 / 1280 / 1024 / 900 / 767 / 600 / 380 px (savoir/design-system.md) ============================================================ */ /* 1440 — grands ecrans : on borne et on aere */ @media(max-width:1440px){ #mm-memento .product-layout{padding:28px 4vw 44px} #mm-memento .rp{padding:56px 5vw} #mm-memento .bloc{padding:0 4vw 44px} #mm-memento .tabs-section{padding:22px 24px} } /* 1280 — portables : les grilles de cartes respirent moins */ @media(max-width:1280px){ #mm-memento .product-layout{gap:34px} #mm-memento .rp-grid{gap:36px} #mm-memento .related-grid{grid-template-columns:repeat(4,1fr)} #mm-memento .tab-panel .choose-grid, #mm-memento .tab-panel .foot-grid{grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:16px} #mm-memento .clientes{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} } /* 1024 — tablette paysage */ @media(max-width:1024px){ #mm-memento .product-layout{gap:28px} #mm-memento .rp{padding:48px 5vw} #mm-memento .rp-grid{grid-template-columns:1fr;gap:30px} #mm-memento .related-grid{grid-template-columns:repeat(3,1fr)} #mm-memento .tabs-nav{gap:16px} #mm-memento .tab-btn{font-size:.72rem;letter-spacing:.12em} #mm-memento #tab-collectors{padding:32px 26px} } /* 900 — bascule en une colonne */ @media(max-width:900px){ #mm-memento .product-layout{grid-template-columns:1fr;gap:26px;padding:22px 4vw 32px} #mm-memento .thumb{width:calc((100% - 24px)/4)} #mm-memento .tabs-section{border-radius:0;border-left:none;border-right:none;padding:20px 4vw} #mm-memento .specs-cols{grid-template-columns:1fr;gap:0} #mm-memento .mur{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))} } /* 767 — tablette portrait et grands telephones */ @media(max-width:767px){ #mm-memento .rp{padding:40px 5vw} #mm-memento .tab-panel .choose-grid, #mm-memento .tab-panel .foot-grid{grid-template-columns:1fr;gap:14px} #mm-memento .tab-panel .choose-card, #mm-memento .tab-panel .foot-card{padding:20px} #mm-memento #tab-collectors{padding:28px 20px} #mm-memento #tab-collectors .historic-grid{grid-template-columns:1fr;gap:14px} #mm-memento #tab-collectors .historic-card{flex-direction:column;align-items:flex-start;text-align:left} #mm-memento #tab-collectors .historic-card img{width:100%;height:160px} #mm-memento .related-grid{grid-template-columns:repeat(2,1fr)} #mm-memento .tab-panel .mm-bande{padding:10px 16px;font-size:.66rem;letter-spacing:.16em} #mm-memento .rp-prices{padding:18px} } /* 600 — telephones */ @media(max-width:600px){ #mm-memento .product-layout{padding:18px 5vw 28px} #mm-memento .thumb{width:calc((100% - 18px)/3)} #mm-memento .clientes{grid-template-columns:1fr 1fr} #mm-memento .mur{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:7px} #mm-memento .filtre{gap:5px} #mm-memento .filtre button{font-size:.68rem;padding:4px 10px} #mm-memento .rp-h2{font-size:1.7rem} #mm-memento .rp-row{font-size:.78rem;padding:9px 0} #mm-memento .tab-panel h2{font-size:1.4rem} #mm-memento .tab-panel h3{font-size:1.15rem;margin:26px 0 10px} #mm-memento .trust{gap:12px} #mm-memento .price-rangee{flex-direction:column} #mm-memento .price-align{min-width:0} } /* 380 — petits telephones : rien ne doit deborder */ @media(max-width:380px){ #mm-memento .product-layout{padding:14px 4vw 24px} #mm-memento .tabs-section{padding:16px 4vw} #mm-memento .rp{padding:30px 4vw} #mm-memento .rp-prices{padding:14px} #mm-memento .rp-cta{padding:11px 18px;font-size:.66rem;letter-spacing:.14em} #mm-memento .mur{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px} #mm-memento .thumb{width:calc((100% - 12px)/3)} #mm-memento .clientes{grid-template-columns:1fr} #mm-memento .related-grid{grid-template-columns:1fr} #mm-memento .tab-panel .choose-card, #mm-memento .tab-panel .foot-card{padding:16px} #mm-memento #tab-collectors{padding:22px 14px} #mm-memento .tab-panel h2, #mm-memento .rp-h2{font-size:1.25rem} #mm-memento .avis-note{font-size:1.7rem} #mm-memento .atc{padding:14px;font-size:.72rem;letter-spacing:.12em} } /* ===================================================================== DEMANDES D'EMILIE DU 10/10, dans le dessin du modele ===================================================================== */ /* largeur des fiches du site : 1400 px de contenu */ #mm-memento .product-layout{max-width:1440px;padding:14px 20px 36px} #mm-memento nav.bc{max-width:1440px;padding:12px 20px 0} @media(max-width:1024px){ #mm-memento .product-layout{padding:16px 4vw 30px} #mm-memento nav.bc{padding:12px 4vw 0} } @media(max-width:767px){ #mm-memento .product-layout{padding:12px 5vw 24px} } /* haut compact : galerie et vignettes entieres dans un ecran d'ordinateur */ @media(min-width:1025px){ #mm-memento .gallery-main{aspect-ratio:auto;height:min(640px,calc(100vh - 385px));min-height:420px} } /* image principale : le produit entier, centre, sur le blanc de ses packshots */ #mm-memento .gallery-main{background:#fff} #mm-memento .gallery-main img{object-fit:contain;object-position:50% 50%;padding:16px;box-sizing:border-box} /* Alma : le bloc des fiches du site, meme dessin que .price-align */ #mm-memento .mini-row{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px} #mm-memento .alma-new-block{background:var(--sand);border-radius:8px;padding:9px 12px;font-size:.7rem;color:var(--char); flex:1;min-width:200px;display:flex;align-items:center;gap:10px;font-family:'Jost',sans-serif} #mm-memento .alma-new-icon{display:flex} #mm-memento .alma-new-icon svg{width:18px;height:18px} #mm-memento .mini-row .price-align{min-width:200px;flex:1} #mm-memento .mini-row .price-align svg{width:18px;height:18px;flex-shrink:0} #mm-memento .mini-row .price-align a{color:var(--accent)} @media(max-width:767px){ #mm-memento .mini-row .price-align{min-width:0;width:100%} } #mm-memento .alma-new-title em{font-style:normal;font-weight:500;color:var(--accent)} #mm-memento .alma-new-desc{display:block;font-size:.66rem;color:var(--mid);margin-top:1px} @media(max-width:767px){ #mm-memento .mini-row{flex-direction:column} #mm-memento .alma-new-block{min-width:0;width:100%} } /* repose-pieds : chaque ligne mene a sa fiche, sans changer le dessin */ /* Selecteur Alma : regles des fiches du site, reprises a l'identique */ #mm-memento .mm-alma-select{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px} #mm-memento .mm-alma-pills{display:flex;gap:6px} #mm-memento .mm-alma-pill{border:1px solid var(--border);background:#fff;border-radius:20px;padding:5px 13px;font-size:.72rem; font-family:'Jost',sans-serif;color:var(--mid);cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.08em;font-weight:500} #mm-memento .mm-alma-pill:hover{border-color:var(--accent);color:var(--char)} #mm-memento .mm-alma-pill.active{background:var(--char);border-color:var(--char);color:var(--warm)} #mm-memento .mm-alma-detail{font-size:.72rem;color:var(--mid);margin:0 0 0 auto;text-align:right;white-space:nowrap} @media(max-width:767px){ #mm-memento .mm-alma-select{gap:8px} #mm-memento .mm-alma-pills{gap:4px} #mm-memento .mm-alma-pill{padding:4px 10px;font-size:.68rem} } @media(max-width:380px){ #mm-memento .mm-alma-pill{padding:4px 8px;font-size:.64rem} } #mm-memento .rp a.rp-row{text-decoration:none} #mm-memento .rp a.rp-row:hover .rp-row-name{color:#fdfaf6}