/* ============================================================ LE REGARD DE NIA — système de design partagé Élégant · sobre · chaleureux · taupe/crème + or raffiné ============================================================ */ /* Les polices Google sont chargées via dans le de chaque page (preconnect + display=swap) — plus performant qu'un @import bloquant ici. */ :root{ /* surfaces */ --cream: #F4EEE5; /* fond principal */ --cream-soft: #EFE7DA; /* sections alternées */ --cream-deep: #E8DDCB; /* cartes / blocs */ --paper: #FBF8F2; /* blanc cassé le plus clair */ /* encre & taupe */ --ink: #2B2621; /* texte principal (noir chaud) */ --ink-soft: #5A4F44; /* texte secondaire */ --muted: #94897A; /* labels, méta */ --taupe: #9A7A5B; /* brun du logo */ --taupe-deep: #785A40; /* or */ --gold: #C2A368; --gold-soft: #D8C49A; --line: #C9BCA8; /* filets fins */ --line-soft: #DBD0BE; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; --mono: 'Spline Sans Mono', ui-monospace, monospace; } *{ box-sizing: border-box; } /* ---- labels surtitres en capitales espacées (signature de la marque) ---- */ .kicker{ font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: .42em; text-transform: uppercase; color: var(--taupe); } .kicker--ink{ color: var(--ink); } .kicker--gold{ color: var(--gold); } /* ---- titres serif ---- */ .serif{ font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: .005em; } .serif-it{ font-style: italic; font-weight: 500; } /* ---- filet fin ---- */ .hr{ height:1px; background: var(--line); border:0; width:100%; } .hr-gold{ height:1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border:0; } /* ---- étincelle 4 branches (motif de la marque) ---- */ .spark{ display:inline-block; color: var(--gold); } .spark svg{ display:block; } /* ---- placeholders photo (à remplacer par les vraies images) ---- */ .ph{ position: relative; background: repeating-linear-gradient(135deg,#E7DCCB 0 11px,#E1D5C1 11px 22px); display:flex; align-items:center; justify-content:center; overflow:hidden; } .ph::after{ content: attr(data-label); font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #9A8D79; background: rgba(251,248,242,.78); padding: 6px 11px; border: 1px solid rgba(154,141,121,.35); text-align:center; max-width: 78%; line-height: 1.5; } .ph--dark{ background: repeating-linear-gradient(135deg,#3a332b 0 11px,#332d26 11px 22px); } .ph--dark::after{ color:#cbbfa9; background: rgba(20,17,14,.55); border-color: rgba(203,191,169,.3); } /* ---- boutons ---- */ .btn{ display:inline-flex; align-items:center; gap:.7em; font-family: var(--sans); font-weight:400; font-size:13px; letter-spacing:.18em; text-transform:uppercase; padding:15px 30px; border:1px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer; text-decoration:none; transition: background .35s ease, color .35s ease, border-color .35s ease; } .btn:hover{ background:var(--ink); color:var(--paper); } .btn--solid{ background:var(--ink); color:var(--paper); } .btn--solid:hover{ background:transparent; color:var(--ink); } .btn--gold{ border-color:var(--taupe); color:var(--taupe-deep); } .btn--gold:hover{ background:var(--taupe); color:var(--paper); border-color:var(--taupe); } a{ color: inherit; }