/* ====================================================================== Griffondart - V2 « Galerie noire » Habillage sombre. Charge styles.css EN AMONT (dans le de la page) puis applique ces surcharges. Pas de @import : permet de basculer clair/sombre en (dé)activant cette feuille. ====================================================================== */ :root{ --blanc:#1E1E1E; /* base anthracite (fond de page) */ --papier:#242424; /* sections alternées */ --papier-2:#2C2C2C; /* cartes / surfaces élevées */ --encre:#ECE7DE; /* texte courant ivoire */ --encre-fort:#FBF6EE; /* titres */ --gris-doux:#9E988E; /* texte secondaire */ --ligne:rgba(255,255,255,.13); --or:#CBA869; --terracotta:#E5A283; --ocre:#E7C46A; --rose-poudre:#E7B6B2; --sauge:#AFC4A4; --bleu-doux:#8FB7BC; --ff-titre:"Bodoni Moda",Georgia,serif; --shadow-soft:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.45); --shadow-lift:0 2px 8px rgba(0,0,0,.45),0 26px 60px rgba(0,0,0,.55); } body{background:var(--blanc);color:var(--encre);} h1,h2,h3,h4{letter-spacing:.005em;} ::selection{background:var(--or);color:#13100C;} /* ---------- Surligneur réinventé : trait lumineux ---------- */ .mark{white-space:normal;} .mark::after{ left:0;right:0;bottom:-.06em;height:3px; background:var(--mark-color,var(--or));opacity:.95; border-radius:2px;clip-path:none; box-shadow:0 0 12px var(--mark-color,var(--or)); transform:scaleX(1);transform-origin:left center; } .navlink{transition:color .22s var(--ease);} .navlink::after{ left:0;right:0;bottom:.02em;height:2px; background:var(--mark-color,var(--or));opacity:1; border-radius:2px;clip-path:none;z-index:0; box-shadow:0 0 10px var(--mark-color,var(--or)); transform:scaleX(0) skewX(0);transform-origin:left center; transition:transform .26s var(--ease); } .navlink:hover,.navlink[aria-current="page"]{color:var(--mark-color,var(--or));} .navlink:hover::after,.navlink[aria-current="page"]::after{transform:scaleX(1) skewX(0);} /* ---------- Boutons ---------- */ .btn--primary{background:var(--or);color:#171309;box-shadow:0 8px 22px rgba(203,168,105,.28);} .btn--primary:hover{box-shadow:0 12px 30px rgba(203,168,105,.42);} .btn--ghost{border:1.5px solid rgba(255,255,255,.42);color:var(--encre);} .btn--ghost:hover{background:var(--encre);color:#171309;} .btn--light{background:var(--papier-2);color:var(--encre);} .textlink:hover{border-color:var(--or);} .cartcount{background:var(--or);color:#171309;} /* ---------- Barre utilitaire / en-tête ---------- */ .topbar{background:var(--blanc);} .header{background:rgba(26,26,26,.82);border-bottom:1px solid var(--ligne);} .header.is-scrolled{box-shadow:0 8px 28px rgba(0,0,0,.5);} .iconbtn:hover{background:rgba(255,255,255,.08);} .dropdown{background:var(--papier-2);border:1px solid var(--ligne);} .dropcol a{color:var(--encre);} .dropcol a:hover{background:rgba(255,255,255,.06);color:var(--mark-color,var(--or));} /* ---------- Hero ---------- */ .hero{background:var(--papier);} .hero__bg{filter:blur(34px) saturate(1) brightness(.5);} .hero__veil{background:linear-gradient(105deg,rgba(28,28,28,.93) 0%,rgba(28,28,28,.8) 38%,rgba(28,28,28,.52) 66%,rgba(28,28,28,.3) 100%);} .hero-photo{background:var(--papier-2);box-shadow:0 30px 70px rgba(0,0,0,.6);} .hero-photo figcaption{color:var(--gris-doux);} .hero__pause,.hero__arrow{background:var(--papier-2);color:var(--encre);border:1px solid var(--ligne);} .hero__arrow:hover{background:rgba(255,255,255,.08);} .hero__dot{background:rgba(255,255,255,.22);} .hero__dot.is-active{background:rgba(255,255,255,.28);} /* ---------- Réassurance ---------- */ .assure{background:var(--blanc);border-bottom:1px solid var(--ligne);} /* ---------- Configurateur ---------- */ .config{background:linear-gradient(180deg,var(--papier) 0%,var(--blanc) 100%);} .config__stage{background:var(--papier-2);border:1px solid var(--ligne);} .config__view{background:radial-gradient(circle at 50% 38%,#333333,#1A1A1A 80%);} .config__view::after{background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%);} .cmodel{background:transparent;border:1.5px solid var(--ligne);color:var(--encre);} .cmodel:hover{border-color:rgba(255,255,255,.55);} .cmodel.is-on{border-color:var(--sauge);background:rgba(175,196,164,.12);box-shadow:inset 0 0 0 1px var(--sauge);} .config__steps .n{background:rgba(255,255,255,.07);color:var(--encre-fort);} .cswatch.is-on{border-color:var(--or);} .cswatch.is-on::after{background:var(--or);color:#171309;border:2px solid var(--papier-2);} /* ---------- Catégories / lookbook (déjà sombres, on renforce) ---------- */ .cat{background:var(--papier-2);} .cat__tint{background:linear-gradient(180deg,rgba(12,12,12,0) 34%,rgba(12,12,12,.72) 100%);} .look{background:var(--papier-2);} /* ---------- Galerie des tissus ---------- */ .chip{background:transparent;border:1.5px solid var(--ligne);color:var(--encre);} .chip:hover{border-color:rgba(255,255,255,.55);} .tswatch{border:3px solid var(--papier-2);box-shadow:0 6px 18px rgba(0,0,0,.5);} .tswatch__tip{background:#121212;color:var(--encre);} .tswatch__tip::after{border-top-color:#121212;} .tswatch__zoom{background:rgba(12,12,12,.4);} /* ---------- Pièces uniques / avis ---------- */ .uniq{background:var(--papier-2);border:1px solid var(--ligne);} .avis{background:var(--papier-2);border:1px solid var(--ligne);} /* ---------- À propos ---------- */ .about__media .frame{background-color:var(--papier-2);} .about__media .chip-img{border:5px solid var(--papier-2);} .about__media .since{background:var(--papier-2);color:var(--or);} /* ---------- Carte cadeau ---------- */ .giftcard{background:linear-gradient(110deg,var(--papier),var(--blanc));} .gc-visual{background:linear-gradient(135deg,#343434,#1C1C1C);box-shadow:var(--shadow-lift),inset 0 0 0 1px rgba(203,168,105,.25);} .gc-visual .gc-logo,.gc-visual .gc-amt-big,.gc-visual b{color:var(--or);} .gc-visual .gc-tag{color:var(--encre);} .gc-chip{background:transparent;border:1.5px solid var(--ligne);color:var(--encre);} .gc-chip:hover{border-color:rgba(255,255,255,.55);} .gc-chip.is-on{background:var(--or);color:#171309;border-color:transparent;box-shadow:0 6px 14px rgba(203,168,105,.4);} .gc-field{background:var(--papier-2);border:1.5px solid var(--ligne);} .gc-field:focus-within{border-color:var(--or);} /* ---------- Newsletter ---------- */ .news input{background:var(--papier-2);border:1.5px solid var(--ligne);color:var(--encre);} .news input:focus{border-color:var(--or);} /* ---------- Guide des tailles ---------- */ .guide{background:var(--papier-2);border:1px solid var(--ligne);} .guide__ic{background:rgba(255,255,255,.06);} /* ---------- Footer ---------- */ .footer{background:var(--papier);border-top:1px solid var(--ligne);} .footer__social a{background:var(--papier-2);border:1px solid var(--ligne);color:var(--encre);} .footer__social a:hover{background:var(--or);color:#171309;} .footer__col a:hover{color:var(--or);} .footer__pay .pm{background:var(--papier-2);border:1px solid var(--ligne);color:var(--encre);} /* ---------- Off-canvas mobile ---------- */ .offcanvas{background:var(--blanc);} .offcanvas nav a{border-bottom:1px solid var(--ligne);}