/* ============================================================
TANIA GOMBERT · Article editorial v3.0 (28/05/2026)
Charte Anita Marqueze 2024 · scrapbook feministe premium pop-art
Palette : rouge passion #AC0C2E · bleu nuit #070738 · creme #FAF3E8
Fonts : Gloock (H1/H2) · Lora (corps serif) · Allura (accents Sergia-like)
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Allura&display=swap');
/* === Tokens couleur Anita === */
.tg-article-eyebrow,
.tg-chapeau,
.tg-body,
.tg-citation,
.tg-cta-block,
.tg-et-si,
.tg-hashtags,
.tg-signature {
--tg-rouge: #AC0C2E;
--tg-rouge-bordeau: #7B0729;
--tg-bleu-nuit: #070738;
--tg-bleu-violet: #3B3878;
--tg-creme: #FAF3E8;
--tg-taupe: #DAD4C7;
--tg-gris: #E6E6E6;
--tg-noir: #1A1721;
}
/* === Eyebrow (categorie + date + lecture) === */
.tg-article-eyebrow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.9rem;
font-family: 'Lora', Georgia, serif;
font-size: 0.74rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #070738;
margin: 0 0 1.6rem;
font-weight: 600;
}
.tg-article-eyebrow .tg-pillar {
color: #AC0C2E;
font-weight: 700;
}
.tg-article-eyebrow .tg-dot {
color: #AC0C2E;
font-weight: 700;
opacity: 0.6;
}
.tg-article-eyebrow .tg-meta {
color: #070738;
opacity: 0.7;
}
/* === Chapeau (intro a droite de l'image) === */
.tg-chapeau p {
font-family: 'Lora', Georgia, serif;
font-size: 1.2rem;
line-height: 1.65;
color: #070738;
margin: 0;
}
.tg-chapeau p::first-letter {
font-family: 'Gloock', Georgia, serif;
font-size: 4.4em;
font-weight: 400;
float: left;
line-height: 0.88;
margin: 0.18em 0.16em -0.05em 0;
color: #AC0C2E;
letter-spacing: -0.02em;
}
/* === Corps article === */
.tg-body strong,
.tg-section-body .elementor-widget-text-editor strong {
font-weight: 700;
background-image: linear-gradient(to top,
rgba(172, 12, 46, 0.18) 0%,
rgba(172, 12, 46, 0.18) 32%,
transparent 32%);
padding: 0 2px;
margin: 0 -2px;
color: #070738;
}
/* === H2 corps : Gloock + filet rouge passion === */
.tg-body h2,
.tg-section-body .elementor-widget-heading h2 {
font-family: 'Gloock', Georgia, serif !important;
font-size: 1.95rem !important;
font-weight: 400 !important;
color: #070738 !important;
margin: 3.8rem 0 1.4rem !important;
line-height: 1.25 !important;
letter-spacing: -0.01em !important;
position: relative;
}
.tg-body h2::before,
.tg-section-body .elementor-widget-heading h2::before {
content: '';
display: block;
width: 48px;
height: 3px;
background: #AC0C2E;
margin-bottom: 1.5rem;
border-radius: 0;
}
/* === Paragraphes corps === */
.tg-body p,
.tg-section-body .elementor-widget-text-editor p {
font-family: 'Lora', Georgia, 'Times New Roman', serif;
font-size: 1.06rem;
line-height: 1.78;
color: #070738;
margin: 0 0 1.3rem;
}
.tg-body a,
.tg-section-body .elementor-widget-text-editor a {
color: #AC0C2E;
text-decoration: none;
border-bottom: 1px solid rgba(172, 12, 46, 0.35);
transition: border-color 0.2s ease;
}
.tg-body a:hover,
.tg-section-body .elementor-widget-text-editor a:hover {
border-bottom-color: #AC0C2E;
}
/* === Citation testimonial Tania (editorial) === */
.tg-citation {
position: relative;
margin: 4rem auto 3.5rem;
padding: 2.75rem 2.5rem 2rem 4.75rem;
max-width: 780px;
background: #FAF3E8;
border-left: 4px solid #AC0C2E;
border-radius: 0;
box-shadow: 0 1px 0 rgba(7, 7, 56, 0.06);
}
.tg-citation::before {
content: '\201C';
position: absolute;
top: -0.05em;
left: 0.7rem;
font-family: 'Gloock', Georgia, serif;
font-size: 7rem;
color: #AC0C2E;
line-height: 1;
font-weight: 400;
opacity: 0.9;
}
.tg-citation .tg-citation-text {
font-family: 'Lora', Georgia, serif;
font-style: italic;
font-size: 1.42rem;
line-height: 1.55;
color: #070738;
margin: 0 0 1.1rem;
font-weight: 500;
}
.tg-citation .tg-citation-author {
display: block;
font-style: normal;
font-variant: small-caps;
letter-spacing: 0.22em;
color: #AC0C2E;
font-size: 0.85rem;
font-weight: 700;
text-align: right;
font-family: 'Lora', Helvetica, Arial, sans-serif;
text-transform: uppercase;
}
.tg-citation .tg-citation-author::before {
content: '— ';
color: #AC0C2E;
opacity: 0.5;
}
/* === Bloc CTA Collaborons / Prenons contact === */
.tg-cta-block {
background: #FAF3E8;
border: 1px solid #DAD4C7;
border-left: 4px solid #AC0C2E;
border-radius: 0;
padding: 2rem 2.2rem 1.85rem;
margin: 3.2rem 0 2.8rem;
}
.tg-cta-block .tg-cta-prompt {
font-family: 'Gloock', Georgia, serif;
font-size: 1.22rem;
font-weight: 400;
color: #070738;
margin: 0 0 1.2rem;
line-height: 1.38;
letter-spacing: -0.01em;
}
.tg-cta-block .tg-cta-actions {
display: flex;
gap: 0.85rem;
flex-wrap: wrap;
align-items: center;
}
.tg-cta-block .tg-cta-btn {
display: inline-block;
padding: 0.85rem 1.65rem;
background: #AC0C2E;
color: #FAF3E8 !important;
font-family: 'Lora', Helvetica, Arial, sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none !important;
border-radius: 0;
border: 2px solid #AC0C2E;
transition: all 0.22s ease;
}
.tg-cta-block .tg-cta-btn:hover {
background: #7B0729;
border-color: #7B0729;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(172, 12, 46, 0.28);
}
.tg-cta-block .tg-cta-btn-secondary {
background: transparent;
color: #AC0C2E !important;
}
.tg-cta-block .tg-cta-btn-secondary:hover {
background: #070738;
border-color: #070738;
color: #FAF3E8 !important;
}
/* === Phrase Et si... finale === */
.tg-et-si {
margin: 3.2rem auto 2.8rem;
padding: 2.4rem 1.5rem;
text-align: center;
border-top: 1px solid #AC0C2E;
border-bottom: 1px solid #AC0C2E;
position: relative;
max-width: 760px;
}
.tg-et-si::before {
content: '·';
position: absolute;
top: -0.65rem;
left: 50%;
transform: translateX(-50%);
background: #fff;
padding: 0 0.9rem;
color: #AC0C2E;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
}
.tg-et-si p {
font-family: 'Allura', 'Lora', Georgia, cursive;
font-style: normal;
font-size: 1.85rem;
line-height: 1.4;
color: #070738;
margin: 0 auto;
max-width: 640px;
}
/* === Hashtags discrets === */
.tg-hashtags {
text-align: center;
margin: 2.2rem auto 1rem;
color: #070738;
opacity: 0.55;
font-size: 0.82rem;
letter-spacing: 0.08em;
font-family: 'Lora', Helvetica, Arial, sans-serif;
}
/* === Signature finale #JusteTania === */
.tg-signature {
text-align: center;
margin: 1.8rem 0 2.2rem;
font-family: 'Allura', 'Lora', Georgia, cursive;
font-style: normal;
color: #AC0C2E;
font-size: 1.5rem;
letter-spacing: 0.02em;
}
.tg-signature::before {
content: '';
display: block;
width: 40px;
height: 2px;
background: #AC0C2E;
margin: 0 auto 1rem;
opacity: 0.5;
}
/* === Mobile === */
@media (max-width: 768px) {
.tg-body h2,
.tg-section-body .elementor-widget-heading h2 {
font-size: 1.55rem !important;
margin: 2.8rem 0 1.1rem !important;
}
.tg-chapeau p { font-size: 1.08rem; line-height: 1.65; }
.tg-chapeau p::first-letter { font-size: 3.7em; }
.tg-citation {
padding: 1.9rem 1.5rem 1.4rem 3rem;
margin: 2.8rem auto 2.2rem;
}
.tg-citation::before { font-size: 5rem; left: 0.4rem; }
.tg-citation .tg-citation-text { font-size: 1.18rem; }
.tg-et-si {
padding: 1.85rem 1rem;
margin: 2.8rem auto 2.2rem;
}
.tg-et-si p { font-size: 1.5rem; }
.tg-cta-block { padding: 1.5rem 1.5rem 1.4rem; }
.tg-cta-block .tg-cta-prompt { font-size: 1.1rem; }
.tg-cta-block .tg-cta-actions {
flex-direction: column;
align-items: stretch;
}
.tg-cta-block .tg-cta-btn { text-align: center; }
.tg-article-eyebrow {
font-size: 0.68rem;
gap: 0.55rem;
letter-spacing: 0.16em;
}
.tg-signature { font-size: 1.3rem; }
}