/* ───────────────────────────────────────────── STYLE V11 — LETTERPRESS TYPOGRAPHIQUE Inspirations : catalogues imprimés Hermès, couvertures Cucinelli, gravures Loro Piana, typographie de musée Pawson. Discipline : invisible si bien fait, ressenti comme matière. Charge APRES style-v10.css. Strictement additif. Principe directeur : - Sur fond clair : ombre = highlight clair AU-DESSUS (1px) + profondeur SOMBRE en-dessous (1px) - Sur fond sombre : highlight chaud (or désaturé) + profondeur encre - Jamais de blur > 2px (sinon ça devient une ombre web 2.0) - Jamais sur le corps de texte ni sur les CTA ───────────────────────────────────────────── */ /* ───────── 1. LETTERPRESS — TITRES HERO (.ph-h1) ───────── Effet : encre pressée dans du papier de coton. Le texte gagne en profondeur sans paraître ombré. */ .ph-h1 { /* Highlight subtil au-dessus + profondeur très douce en-dessous */ text-shadow: 0 -.5px 0 rgba(255, 252, 244, .42), /* lueur d'encre claire au-dessus */ 0 1px 0 rgba(20, 18, 14, .085); /* profondeur d'enfoncement */ } .ph-h1 em { /* L'italique a une profondeur encore plus douce — sensation de plume */ text-shadow: 0 -.5px 0 rgba(255, 252, 244, .35), 0 1px 1px rgba(20, 18, 14, .08); } /* Sur HERO sombres (pages projets), on inverse la logique */ .ph-full .ph-h1, .cine .ph-h1 { text-shadow: 0 -.5px 0 rgba(184, 159, 110, .22), /* highlight or désaturé */ 0 1px 2px rgba(0, 0, 0, .42); /* profondeur encre */ } /* ───────── 2. LETTERPRESS — DISPLAY (h2.display) ───────── Idem mais plus discret, car taille plus modeste. */ .display { text-shadow: 0 -.5px 0 rgba(255, 252, 244, .32), 0 1px 0 rgba(20, 18, 14, .065); } .sec--noir .display { text-shadow: 0 -.5px 0 rgba(184, 159, 110, .18), 0 1px 1.5px rgba(0, 0, 0, .35); } /* ───────── 3. LETTERPRESS — CHIFFRES ROMAINS ───────── Les numéros (chapitre, proj-number, cine-num) reçoivent un léger relief d'embossage métallique discret. */ .cine-num, .chapitre-num, .proj-number { text-shadow: 0 -.5px 0 rgba(255, 252, 244, .28), 0 1px 1.5px rgba(20, 18, 14, .35), 0 0 8px rgba(184, 159, 110, .12); /* halo or très diffus */ } /* Numéros en or (proj-number) sur fond sombre : relief plus marqué */ .proj-number { text-shadow: 0 -.5px 0 rgba(184, 159, 110, .28), 0 1px 1.5px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25); } /* ───────── 4. LETTRINE EDITORIALE ───────── La 1ʳᵉ lettre du 1er paragraphe `.lead` reçoit un traitement de lettrine imprimée — référence directe aux livres anciens et catalogues Cucinelli. Activé via classe .has-lettrine (ajoutée par JS V11). */ .lead.has-lettrine::first-letter { font-family: 'EB Garamond', 'Cormorant Garamond', serif; font-size: 4.4em; line-height: .85; font-weight: 400; font-style: normal; float: left; margin: .12em .14em -.05em 0; padding-top: .04em; color: rgba(40, 36, 30, .88); text-shadow: 0 -.5px 0 rgba(255, 252, 244, .55), 0 1px 0 rgba(20, 18, 14, .15), 0 2px 3px rgba(20, 18, 14, .08); /* Petit accent or désaturé sous la lettrine */ border-bottom: .5px solid rgba(184, 159, 110, .32); padding-bottom: .04em; /* Ligatures historiques activées spécifiquement */ font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1, "swsh" 1; } /* En section noire, la lettrine s'inverse */ .sec--noir .lead.has-lettrine::first-letter { color: rgba(245, 241, 232, .92); text-shadow: 0 -.5px 0 rgba(184, 159, 110, .35), 0 1px 0 rgba(0, 0, 0, .42), 0 2px 4px rgba(0, 0, 0, .35); border-bottom-color: rgba(184, 159, 110, .42); } @media (max-width: 768px) { .lead.has-lettrine::first-letter { font-size: 3.6em; margin: .1em .12em -.05em 0; } } /* ───────── 5. LOGO CARAVELLI — LETTERPRESS DOUX ───────── Le logo dans le header gagne en présence sans devenir lourd. */ .lg .ttl, .hd .logo, header .logo span, .lg span, [class*="lg-"] { /* On cible large car la structure varie selon les pages */ } /* Application uniquement sur le texte principal du logo */ header [class*="ttl"], header .lg-ttl, .hd .ttl { text-shadow: 0 -.5px 0 rgba(255, 252, 244, .35), 0 .5px 0 rgba(20, 18, 14, .12); } /* ───────── 6. CITATIONS CINEMA — RELIEF DOUX ───────── Les citations sur les vidéos cinéma ont déjà un text-shadow en V8. On le raffine pour qu'il imite l'encre sur film noir. */ .cine-quote blockquote { text-shadow: 0 -.5px 0 rgba(247, 243, 234, .12), 0 1px 3px rgba(20, 18, 14, .58), 0 2px 18px rgba(20, 18, 14, .35) !important; } .cine-quote blockquote em { /* L'italique reçoit en plus un soupçon de chaleur dorée */ text-shadow: 0 -.5px 0 rgba(184, 159, 110, .18), 0 1px 3px rgba(20, 18, 14, .55), 0 2px 16px rgba(20, 18, 14, .32) !important; } /* ───────── 7. CITATION EDITORIALE — RELIEF SUR LES GUILLEMETS ───────── Les guillemets « » reçoivent une profondeur typographique distincte du texte — comme dans la composition imprimée. */ .editorial-pull blockquote::before, .editorial-pull blockquote::after { text-shadow: 0 -.5px 0 rgba(255, 252, 244, .42), 0 1px 2px rgba(140, 110, 72, .25); } /* La citation elle-même : relief très très doux */ .editorial-pull blockquote { text-shadow: 0 -.5px 0 rgba(255, 252, 244, .25), 0 1px 0 rgba(20, 18, 14, .045); } .sec--noir .editorial-pull blockquote { text-shadow: 0 -.5px 0 rgba(184, 159, 110, .15), 0 1px 1.5px rgba(0, 0, 0, .25); } /* ───────── 8. SCEAU 1948 — RELIEF EMBOSSÉ ───────── Le sceau MCMXLVIII reçoit un véritable embossage métallique. */ .sceau-1948-num { text-shadow: 0 -1px 0 rgba(255, 240, 200, .55), /* highlight or clair */ 0 1px 0 rgba(60, 38, 12, .85), /* profondeur métal */ 0 2px 4px rgba(0, 0, 0, .35); } .sceau-1948-top, .sceau-1948-bot { text-shadow: 0 -.5px 0 rgba(255, 240, 200, .35), 0 1px 0 rgba(60, 38, 12, .55); } /* ───────── 9. EYEBROW & KICKER — RELIEF MICRO-OR ───────── Les eyebrows et kickers reçoivent un soupçon de luminosité pour évoquer une encre métallique imprimée. */ .eyebrow, .kicker, .cine-cap { text-shadow: 0 .5px 0 rgba(140, 110, 72, .10); } .sec--noir .eyebrow, .sec--noir .kicker, .cine-cap { text-shadow: 0 .5px 0 rgba(184, 159, 110, .18); } /* ───────── 10. ANTI-AGGRESSION ───────── On s'assure que le corps de texte, les CTA, les liens nav ne reçoivent JAMAIS de shadow — c'est sacré. */ .body, p.body, .ph-sub, .lead, .btn, .btn-primary, .btn-l, .btn-line, .btn-ghost, .nl, .ck-btn, .form-row input, .form-row textarea, .ai-proactive-action, .audio-invite-btn { text-shadow: none !important; } /* Sauf la lettrine, qui est un cas spécial */ .lead.has-lettrine::first-letter { /* déjà défini ci-dessus, mais on s'assure que rien ne le réinitialise */ } /* ───────── 11. PRINT-OPTIMIZED ───────── Si l'utilisateur imprime, on retire toutes les ombres pour préserver la pureté typographique. */ @media print { * { text-shadow: none !important; } } /* Si reduced motion, on garde les shadows (statiques, pas de problème) */