/* ============================================================ Labo Blog — Charte graphique Gris Souris pour les articles Reprend le design system de accueil_test.html (validé client) Tout est scopé sous .gs-article pour ne pas affecter le thème. ============================================================ */ :root{ --gs-rouge:#D91E0E; --gs-noir:#1A1A1A; --gs-blanc:#FFFFFF; --gs-gris-clair:#F4F4F4; --gs-gris:#9B9B9B; --gs-transition:.5s cubic-bezier(.16,1,.3,1); --gs-ombre:0 6px 32px rgba(0,0,0,.10); } /* ===== ANIMATIONS SCROLL-REVEAL (robustes) ===== N'agissent que si (ajouté par JS). Sans JS → contenu visible normalement. */ .gs-anim-ready .gs-reveal{ opacity:0; transform:translateY(40px); transition:opacity .7s var(--gs-transition), transform .7s var(--gs-transition); will-change:opacity,transform; } .gs-anim-ready .gs-reveal.gs-from-left{ transform:translateX(-45px); } .gs-anim-ready .gs-reveal.gs-from-right{ transform:translateX(45px); } .gs-anim-ready .gs-reveal.gs-visible{ opacity:1; transform:none; } .gs-delay-1{ transition-delay:.12s; } .gs-delay-2{ transition-delay:.24s; } .gs-delay-3{ transition-delay:.36s; } .gs-delay-4{ transition-delay:.48s; } @media (prefers-reduced-motion: reduce){ .gs-anim-ready .gs-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ============================================================ PAGE LISTE DU BLOG (/blog/) ============================================================ */ .blog .entry-hero{ background:#fff !important; padding:48px 0 8px !important; } .blog .entry-hero .entry-title{ font-size:clamp(30px,4.5vw,52px); font-weight:900; letter-spacing:-1.4px; line-height:1.1; color:var(--gs-noir); } .blog .entry-hero .entry-title em{ font-style:normal; color:var(--gs-rouge); } /* Cartes d'articles */ .blog .loop-entry{ background:#fff !important; border:none !important; border-top:4px solid var(--gs-rouge) !important; border-radius:0 0 6px 6px; box-shadow:0 6px 32px rgba(0,0,0,.10) !important; overflow:hidden; transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1); } .blog .loop-entry:hover{ transform:translateY(-6px); box-shadow:0 18px 50px rgba(0,0,0,.15) !important; } .blog .loop-entry .entry-content-wrap{ padding:30px !important; } .blog .loop-entry .entry-title{ font-size:21px; line-height:1.28; letter-spacing:-.4px; margin-bottom:8px; } .blog .loop-entry .entry-title a{ color:var(--gs-noir); text-decoration:none; font-weight:800; } .blog .loop-entry .entry-title a:hover{ color:var(--gs-rouge); } .blog .loop-entry .entry-summary{ color:var(--gs-gris); font-size:14.5px; line-height:1.7; } .blog .loop-entry .entry-meta, .blog .loop-entry .entry-taxonomies{ font-size:12px; color:var(--gs-gris); letter-spacing:.3px; } .blog .loop-entry .entry-meta a, .blog .loop-entry .entry-taxonomies a{ color:var(--gs-rouge); text-decoration:none; } /* Lien "lire la suite" -> style charte */ .blog .loop-entry .more-link{ display:inline-block; margin-top:16px; color:var(--gs-rouge); font-weight:700; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; transition:color .2s; } .blog .loop-entry .more-link:hover{ color:var(--gs-noir); } /* Pagination */ .blog .kadence-pagination a, .blog .kadence-pagination span{ transition:all .2s; } .blog .kadence-pagination .current{ background:var(--gs-rouge) !important; border-color:var(--gs-rouge) !important; color:#fff !important; } /* ===== TITRE DE L'ARTICLE (hero Kadence ré-affiché sur les posts) ===== */ .single-post .entry-hero{ background:#fff !important; padding:42px 0 6px !important; } .single-post .entry-hero .entry-title{ font-size:clamp(28px,4vw,46px); font-weight:900; letter-spacing:-1.2px; line-height:1.14; color:var(--gs-noir); } .single-post .entry-hero .entry-title em{ font-style:normal; color:var(--gs-rouge); } /* ===== WRAPPER ARTICLE ===== */ .gs-article{ font-family:'Helvetica Neue',Arial,sans-serif; color:#3a3a3a; font-size:16px; line-height:1.78; max-width:780px; margin:0 auto; } /* ===== EYEBROW (sur-titre) ===== */ .gs-article .gs-eyebrow{ display:block; font-size:11px; letter-spacing:3.5px; text-transform:uppercase; color:var(--gs-rouge); font-weight:700; margin:0 0 12px; } /* ===== CHAPÔ ===== */ .gs-article .gs-lead{ font-size:19px; line-height:1.7; color:var(--gs-noir); font-weight:500; border-left:4px solid var(--gs-rouge); padding-left:22px; margin:0 0 40px; } /* ===== TITRES ===== */ .gs-article h2{ font-size:clamp(24px,3vw,36px); font-weight:900; letter-spacing:-1px; line-height:1.15; color:var(--gs-noir); margin:52px 0 18px; } .gs-article h2 em{ font-style:normal; color:var(--gs-rouge); } .gs-article h3{ font-size:19px; font-weight:800; letter-spacing:-.3px; color:var(--gs-noir); margin:30px 0 10px; } /* ===== TEXTE ===== */ .gs-article p{ margin:0 0 18px; } .gs-article strong{ color:var(--gs-noir); font-weight:700; } .gs-article a{ color:var(--gs-rouge); text-decoration:underline; text-underline-offset:2px; transition:color .2s; } .gs-article a:hover{ color:var(--gs-noir); } /* ===== LISTES À PUCES ROUGES ===== */ .gs-article ul{ list-style:none; padding:0; margin:0 0 24px; } .gs-article ul li{ position:relative; padding:8px 0 8px 28px; border-bottom:1px solid rgba(0,0,0,.06); } .gs-article ul li::before{ content:'→'; position:absolute; left:0; top:8px; color:var(--gs-rouge); font-weight:900; } .gs-article ol{ margin:0 0 24px 20px; } .gs-article ol li{ padding:5px 0; } /* ===== FILM STRIP ──── ■ ■ ■ ■ ──── ===== */ .gs-strip{ display:flex; align-items:center; margin:50px 0; } .gs-strip::before,.gs-strip::after{ content:''; flex:1; height:1px; background:#e0e0e0; } .gs-strip span{ color:var(--gs-rouge); font-size:9px; letter-spacing:7px; padding:0 18px; font-weight:900; white-space:nowrap; } /* ===== FIGURES / IMAGES ===== */ .gs-article figure{ margin:30px 0; } .gs-article figure img{ width:100%; height:auto; display:block; border-radius:4px; box-shadow:var(--gs-ombre); } .gs-article figcaption{ font-size:12px; color:var(--gs-gris); margin-top:10px; text-align:center; font-style:italic; } /* ===== TABLEAU (charte) ===== */ .gs-article table{ width:100%; border-collapse:collapse; margin:26px 0; font-size:14px; box-shadow:var(--gs-ombre); overflow:hidden; } .gs-article thead tr{ background:var(--gs-noir); color:#fff; } .gs-article thead th{ padding:13px 15px; text-align:left; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; } .gs-article tbody td{ padding:12px 15px; border-bottom:1px solid #eee; } .gs-article tbody tr:nth-child(even){ background:#fafafa; } .gs-article tbody tr:hover{ background:#fdecea; } /* ===== CARTE FAQ ===== */ .gs-faq{ margin:24px 0; } .gs-card-q{ background:#fff; box-shadow:var(--gs-ombre); border-top:3px solid var(--gs-rouge); padding:22px 26px; margin-bottom:16px; transition:transform var(--gs-transition), box-shadow var(--gs-transition); } .gs-card-q:hover{ transform:translateY(-5px); box-shadow:0 16px 48px rgba(0,0,0,.14); } .gs-card-q h3{ margin:0 0 8px; } .gs-card-q p:last-child{ margin-bottom:0; } /* ===== ENCART "À LIRE AUSSI" ===== */ .gs-related{ background:var(--gs-gris-clair); padding:30px 32px; border-radius:6px; margin:44px 0; } .gs-related .gs-eyebrow{ margin-bottom:14px; } .gs-related ul{ margin:0; } .gs-related ul li{ border-bottom-color:rgba(0,0,0,.09); } .gs-related ul li:last-child{ border-bottom:none; } .gs-related a{ text-decoration:none; font-weight:600; color:var(--gs-noir); } .gs-related a:hover{ color:var(--gs-rouge); } /* ===== BLOC CTA FINAL (rouge) ===== */ .gs-cta-block{ background:var(--gs-rouge); color:#fff; padding:44px 40px; border-radius:6px; margin:48px 0 12px; text-align:center; position:relative; overflow:hidden; } .gs-cta-block h2{ color:#fff; margin:0 0 12px; } .gs-cta-block p{ color:rgba(255,255,255,.92); margin:0 auto 24px; max-width:480px; } /* ===== BOUTONS ===== */ .gs-btn{ display:inline-block; padding:14px 30px; font-size:12px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; text-decoration:none !important; cursor:pointer; border:none; transition:all var(--gs-transition); } .gs-btn-rouge{ background:var(--gs-rouge); color:#fff !important; } .gs-btn-rouge:hover{ background:#a81509; color:#fff !important; } .gs-btn-noir{ background:var(--gs-noir); color:#fff !important; } .gs-btn-noir:hover{ background:#000; color:#fff !important; } .gs-cta-block .gs-btn-light{ background:#fff; color:var(--gs-rouge) !important; } .gs-cta-block .gs-btn-light:hover{ background:var(--gs-noir); color:#fff !important; } /* ===== ENCART INFO (bordure rouge gauche) ===== */ .gs-note{ border-left:4px solid var(--gs-rouge); background:#fafafa; padding:16px 22px; border-radius:0 4px 4px 0; margin:24px 0; } .gs-note p:last-child{ margin-bottom:0; } /* ===== LOGO EN-TÊTE D'ARTICLE ===== */ .gs-article .gs-logo-row{ text-align:center; margin:0 0 16px; } .gs-article .gs-logo-row img{ width:auto; max-width:190px; height:auto; display:inline-block; box-shadow:none; border-radius:0; } /* ===== ENCART SOMBRE (infos pratiques) ===== */ .gs-infobox{ background:var(--gs-noir); color:#fff; border-radius:6px; padding:30px 34px; margin:34px 0; } .gs-infobox .gs-eyebrow{ color:#fff; opacity:.8; } .gs-infobox h3{ color:#fff; margin:0 0 16px; } .gs-infobox dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:11px 24px; } .gs-infobox dt{ color:var(--gs-rouge); font-weight:700; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; padding-top:3px; } .gs-infobox dd{ margin:0; color:#eaeaea; } .gs-infobox dd strong{ color:#fff; } @media (max-width:520px){ .gs-infobox dl{ grid-template-columns:1fr; gap:4px 0; } .gs-infobox dt{ margin-top:10px; } } /* ===== CITATION ARTISTE ===== */ .gs-quote{ border-left:4px solid var(--gs-rouge); padding:8px 0 8px 26px; margin:28px 0; font-size:17px; line-height:1.75; font-style:italic; color:#2b2b2b; } .gs-quote cite{ display:block; margin-top:14px; font-style:normal; font-weight:700; font-size:13px; letter-spacing:.5px; color:var(--gs-noir); } .gs-quote cite::before{ content:'— '; color:var(--gs-rouge); } /* ===== SÉPARATEUR ===== */ .gs-article hr{ border:none; border-top:1px solid #e8e8e8; margin:40px 0; } /* ===== RESPONSIVE ===== */ @media (max-width:600px){ .gs-article{ font-size:15px; } .gs-cta-block{ padding:32px 22px; } .gs-related{ padding:24px 22px; } .gs-card-q{ padding:20px; } }