*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:root {
--sticky-top: 150px;
--ojim: #e95740;
--ojim-dark: #c94030;
--dark: #1A1A18;
--ink: #414141;
--mid: #6B6963;
--light: #B0ADA6;
--warm: #F5F3EE;
--parchment: #EDE9E1;
--white: #FDFCFA;
--border: #DDD9D1;
--border-dark: #3A3935;
--ff-display: 'Playfair Display', Georgia, serif;
--ff-body: 'Open Sans', Arial, sans-serif;
--ff-ui: 'Open Sans', Arial, sans-serif;
}
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--ff-ui); background: #f5f3ee; color: var(--ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; }
body > footer { margin-top: auto; }
/* TOP BAR */
.topbar { background: var(--dark); color: var(--light); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 7px 0; text-align: center; border-bottom: 1px solid rgba(255,255,255,.12); }
.topbar a { color: var(--ojim); text-decoration: none; font-weight: 600; }
/* HEADER */
header { background: var(--dark); border-bottom: 3px solid var(--ojim); position: sticky; top: 0; z-index: 100; }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 6px 24px 0; display: flex; align-items: center; justify-content: space-between; height: 93px; gap: 24px; }
.logo-link { display: flex; align-items: center; height: 60px; text-decoration: none; flex-shrink: 0; }
.logo-svg-wrap { height: 60px; width: auto; overflow: visible; }
.logo-svg-wrap { margin: 0 0 15px 0; padding: 0; }
header { transition: all 0.25s ease; }
header.scrolled .header-inner { height: 56px; }
header.scrolled .logo-link { height: 42px; }
header.scrolled .logo-svg-wrap { height: 42px; margin-bottom: 0; }
nav { display: flex; align-items: center; gap: 4px; }
nav a { color: #ccc; text-decoration: none; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 6px 10px; border-radius: 3px; transition: color .15s, background .15s; white-space: nowrap; }
nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
nav a.active { color: var(--ojim); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-search { background: none; border: none; cursor: pointer; color: var(--light); padding: 6px; line-height: 0; }
.btn-search svg { width: 18px; height: 18px; }
.btn-don { background: var(--ojim); color: #fff; border: none; padding: 8px 16px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; cursor: pointer; border-radius: 3px; text-decoration: none; transition: background .15s; white-space: nowrap; }
.btn-don:hover { background: var(--ojim-dark); }
/* SEARCH */
#search-input::placeholder { color: rgba(255,255,255,.35); font-style: normal; }
#search-input:focus { border-bottom-color: rgba(255,255,255,.55); }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.search-fake-caret { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: rgba(255,255,255,.7); animation: blink 1s steps(1) infinite; pointer-events: none; }
#search-input:focus ~ .search-fake-caret,
#search-input:not(:placeholder-shown) ~ .search-fake-caret { display: none; }
.ticker { background: var(--warm); border-bottom: 1px solid var(--border); padding: 10px 0; overflow: hidden; }
.ticker-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 16px; }
.ticker-label { background: var(--ojim); color: #fff; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 2px; flex-shrink: 0; }
.ticker-track-wrap { flex: 1; overflow: hidden; }
.ticker-track { display: flex; gap: 0; white-space: nowrap; animation: ticker-scroll 60s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item { font-size: 13px; color: var(--ink); flex-shrink: 0; padding-right: 48px; }
.ticker-item a { text-decoration: none; color: var(--ink); }
.ticker-item a:hover { color: var(--ojim); }
.ticker-sep { color: var(--light); padding-right: 48px; flex-shrink: 0; font-size: 13px; }
/* SECTION LABEL */
.section-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--ojim); display: flex; align-items: center; gap: 8px; }
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* BADGES */
.cat-badge { background: var(--ojim); color: #fff; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 2px; }
.cat-badge.portrait { background: var(--dark); }
.cat-badge.dossier { background: #2C5F2E; }
.cat-badge.infographie { background: #1A4A7A; }
/* HERO */
.hero { padding: 40px 0 0; background: var(--white); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; }
.hero-main { padding-right: 36px; border-right: 1px solid var(--border); }
.hero-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.hero-date { font-size: 12px; color: var(--mid); letter-spacing: .04em; }
.hero-title { font-family: var(--ff-display); font-size: 48px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--dark); margin-bottom: 16px; }
.hero-main > a { text-decoration: none; }
.hero-excerpt { font-family: var(--ff-body); font-size: 18px; line-height: 1.7; color: var(--mid); margin-bottom: 24px; }
.hero-image-placeholder { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, #2C2B28 0%, #1A1A18 50%, #3A2820 100%); border-radius: 2px; margin-top: 24px; position: relative; overflow: hidden; display: flex; align-items: flex-end; cursor: pointer; }
.hero-image-placeholder::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); }
.hero-image-placeholder img { transition: transform 0.5s ease; }
.hero-image-placeholder:hover img { transform: scale(1.04); } position: relative; padding: 14px 24px; font-size: 13px; color: rgba(255,255,255,.7); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-image-caption strong { color: #fff; font-size: 13px; }
.read-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ojim); text-decoration: none; transition: gap .2s; }
.read-link:hover { gap: 14px; }
.read-link svg { width: 16px; height: 16px; }
/* HERO SIDEBAR */
.hero-sidebar { padding-left: 28px; }
.sidebar-title { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--light); border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 14px; }
.mini-article { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); text-decoration: none; }
.mini-article:last-child { border-bottom: none; }
.mini-num { font-family: var(--ff-display); font-size: 28px; font-weight: 700; color: var(--parchment); line-height: 1; flex-shrink: 0; width: 28px; text-align: right; }
.mini-cat { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ojim); margin-bottom: 4px; }
.mini-title { font-family: var(--ff-display); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--dark); }
.mini-article:hover .mini-title { color: var(--ojim); }
/* DON WIDGET */
.don-widget { background: var(--dark); color: #fff; border-radius: 3px; padding: 20px; transition: opacity .25s ease, visibility .25s ease; }
.don-widget.is-hidden { opacity: 0; visibility: hidden; }
.don-widget h3 { font-family: var(--ff-display); font-size: 20px; font-weight: 600; margin-bottom: 16px; color: #fff; }
.don-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.don-stat-label { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.don-stat-value { font-family: var(--ff-display); font-size: 22px; font-weight: 600; color: #fff; }
.don-bar-bg { background: rgba(255,255,255,.12); border-radius: 2px; height: 6px; margin-bottom: 4px; }
.don-bar-fill { background: var(--ojim); height: 100%; border-radius: 2px; width: 73.9%; }
.don-pct { font-size: 11px; color: rgba(255,255,255,.5); margin-bottom: 14px; }
.btn-don-full { display: block; text-align: center; background: var(--ojim); color: #fff; padding: 11px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; text-decoration: none; border-radius: 2px; transition: background .15s; }
.btn-don-full:hover { background: var(--ojim-dark); }
/* VEILLE */
.veille-section { padding: 36px 0; background: var(--white); }
.veille-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.veille-header .section-label { flex: 1; }
.see-all { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--mid); text-decoration: none; flex-shrink: 0; margin-left: 16px; }
.see-all:hover { color: var(--ojim); }
.articles-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.article-card { text-decoration: none; display: block; }
.article-img { width: 100%; aspect-ratio: 16/9; border-radius: 2px; background: var(--parchment); margin-bottom: 14px; overflow: hidden; }
.article-img img { transition: transform 0.5s ease; }
.article-card:hover .article-img img { transform: scale(1.04); }
.article-img-ph { width: 100%; height: 100%; background: linear-gradient(135deg, var(--parchment), var(--border)); display: flex; align-items: center; justify-content: center; font-family: var(--ff-display); font-size: 40px; color: rgba(0,0,0,.08); font-weight: 700; }
.article-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.article-title { font-family: var(--ff-display); font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--dark); margin-bottom: 8px; transition: color .15s; }
.article-card:hover .article-title { color: var(--ojim); }
.article-excerpt { font-family: var(--ff-body); font-size: 15px; line-height: 1.65; color: var(--mid); }
/* PORTRAITS */
.portraits-section { background: var(--dark); padding: 40px 0; }
.portraits-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.portraits-top .section-label { flex: 1; margin-bottom: 0; color: rgba(255,255,255,.4); }
.portraits-top .section-label::after { background: rgba(255,255,255,.1); }
.portraits-header { margin-bottom: 28px; }
.portraits-intro h2 { font-family: var(--ff-display); font-size: 38px; font-weight: 600; color: #fff; line-height: 1.1; margin-bottom: 8px; max-width: 50%; }
.portraits-intro p { font-size: 14px; color: rgba(255,255,255,.5); max-width: 380px; }
.portraits-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
.portrait-card { text-decoration: none; display: block; border-radius: 2px; overflow: hidden; }
.portrait-card-img { width: 100%; aspect-ratio: 3/4; background: var(--border-dark); position: relative; overflow: hidden; }
.portrait-card-img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--ff-display); font-size: 48px; font-weight: 700; color: rgba(255,255,255,.08); background: linear-gradient(160deg,#2C2B28 0%,#1A1A18 100%); }
.portrait-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent,rgba(0,0,0,.85)); padding: 24px 12px 12px; }
.portrait-card-name { font-family: var(--ff-display); font-size: 16px; font-weight: 600; color: #fff; line-height: 1.2; }
/* Anti-liseré de survol : repos à 1.01 (couvre les arrondis de sous-pixel
des colonnes fractionnaires — le trait fugace au bord), couche GPU. */
.portrait-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.5s ease; transform: scale(1.01); backface-visibility: hidden; will-change: transform; }
.portrait-card:hover .portrait-card-img img { transform: scale(1.06); }
.portrait-card-img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--ff-display); font-size: 48px; font-weight: 700; color: rgba(255,255,255,.08); background: linear-gradient(160deg,#2C2B28 0%,#1A1A18 100%); transition: transform 0.5s ease; }
.portrait-card-img-ph { transform: scale(1.01); backface-visibility: hidden; }
.portrait-card:hover .portrait-card-img-ph { transform: scale(1.06); }
.portraits-see-all { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.4); text-decoration: none; flex-shrink: 0; margin-left: 16px; transition: color .15s; }
.portraits-see-all:hover { color: var(--ojim); }
/* DON BANNER */
.don-banner { background: var(--dark); border-radius: 3px; padding: 28px 32px; margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.don-banner-left { }
.don-banner-title { font-family: var(--ff-display); font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.don-banner-sub { font-size: 13px; color: rgba(255,255,255,.45); margin-bottom: 16px; }
.don-banner-track { background: rgba(255,255,255,.1); border-radius: 2px; height: 6px; width: 100%; }
.don-banner-fill { background: var(--ojim); height: 100%; border-radius: 2px; width: 73.9%; transition: width 1s ease; }
.don-banner-meta { display: flex; gap: 32px; flex-wrap: wrap; }
.don-banner-stat { }
.don-banner-stat-label { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 2px; }
.don-banner-stat-value { font-family: var(--ff-display); font-size: 20px; font-weight: 600; color: #fff; }
.don-banner-pct { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 6px; }
.don-banner-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.don-banner-cta .btn-don-full { white-space: nowrap; padding: 14px 28px; font-size: 12px; }
.don-banner-cta-note { font-size: 11px; color: rgba(255,255,255,.35); text-align: center; }
.infographies-section { padding: 40px 0; background: var(--white); }
.infographies-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.infographie-card { background: var(--warm); border: 1px solid var(--border); border-radius: 2px; padding: 24px; text-decoration: none; display: flex; gap: 20px; transition: border-color .15s; }
.infographie-card:hover { border-color: var(--ojim); }
.infographie-icon { width: 128px; aspect-ratio: 1/1; align-self: flex-start; background: var(--dark); border-radius: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.infographie-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.infographie-icon svg { width: 28px; height: 28px; color: var(--ojim); }
.infographie-content h3 { font-family: var(--ff-display); font-size: 20px; font-weight: 600; color: var(--dark); margin-bottom: 6px; line-height: 1.2; }
.infographie-card:hover h3 { color: var(--ojim); }
.infographie-content p { font-family: var(--ff-body); font-size: 14px; color: var(--mid); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
/* DOSSIERS */
.dossiers-section { background: var(--warm); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 0; }
.dossiers-intro { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-bottom: 28px; }
.dossiers-intro h2 { font-family: var(--ff-display); font-size: 36px; font-weight: 600; color: var(--dark); line-height: 1.1; }
.dossiers-intro p { font-family: var(--ff-body); font-size: 16px; color: var(--mid); margin-top: 8px; max-width: 460px; }
.don-cta-mini { background: var(--dark); color: #fff; border-radius: 2px; padding: 20px 24px; text-align: center; min-width: 200px; }
.don-cta-mini p { font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 6px; }
.don-cta-mini strong { font-family: var(--ff-display); font-size: 24px; color: #fff; display: block; margin-bottom: 12px; }
.dossiers-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.dossier-card { background: #fff; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; text-decoration: none; display: block; transition: box-shadow .15s; }
.dossier-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.dossier-cover { background: var(--dark); position: relative; overflow: hidden; }
.dossier-cover img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.dossier-card:hover .dossier-cover img { transform: scale(1.04); }
.dossier-cover-lines { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 16px 20px; }
.dossier-cover-line { height: 2px; background: rgba(255,255,255,.12); border-radius: 1px; }
.dossier-cover-line:nth-child(1) { width: 70%; }
.dossier-cover-line:nth-child(2) { width: 90%; }
.dossier-cover-line:nth-child(3) { width: 55%; }
.dossier-cover-line:nth-child(4) { width: 80%; }
.dossier-cover-line:nth-child(5) { width: 65%; }
.dossier-type { position: absolute; top: 12px; right: 12px; background: var(--ojim); color: #fff; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; padding: 3px 8px; border-radius: 2px; }
.dossier-body { padding: 16px; }
.dossier-title { font-family: var(--ff-display); font-size: 17px; font-weight: 600; color: var(--dark); line-height: 1.25; margin-bottom: 6px; }
.dossier-card:hover .dossier-title { color: var(--ojim); }
.dossier-desc { font-family: var(--ff-body); font-size: 13px; color: var(--mid); line-height: 1.5; margin-bottom: 12px; }
.dossier-don { font-size: 11px; color: var(--ojim); font-weight: 600; letter-spacing: .06em; display: flex; align-items: center; gap: 6px; }
/* NEWSLETTER */
.newsletter-section { background: var(--ojim); padding: 40px 0; position: relative; overflow: hidden; }
.newsletter-envelope { position: absolute; left: 50%; bottom: -90px; transform: translateX(-50%) rotate(-45deg); width: 360px; height: 240px; color: #fff; opacity: .12; pointer-events: none; z-index: 0; }
.newsletter-section .container { position: relative; z-index: 1; }
.newsletter-inner { display: grid; grid-template-columns: 1fr 460px; gap: 40px; align-items: center; }
.newsletter-inner h2 { font-family: var(--ff-display); font-size: 32px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.newsletter-inner p { font-size: 14px; color: rgba(255,255,255,.75); }
.newsletter-form { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.newsletter-form input[type="email"] { border: none; border-radius: 3px; padding: 14px 18px; font-family: var(--ff-ui); font-size: 14px; background: rgba(0,0,0,.2); color: #fff; outline: none; width: 100%; }
.newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,.45); }
.newsletter-form button { background: var(--dark); color: #fff; border: none; border-radius: 3px; padding: 14px 22px; font-family: var(--ff-ui); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .15s; white-space: nowrap; align-self: flex-start; }
.newsletter-form button:hover { background: #000; }
.newsletter-optin { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.newsletter-optin input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; margin-top: 2px; accent-color: var(--dark); cursor: pointer; }
.newsletter-optin span { font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.45; }
/* FOOTER */
footer { background: var(--dark); padding: 48px 0 24px; color: rgba(255,255,255,.5); }
.footer-grid { display: grid; grid-template-columns: 260px 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border-dark); margin-bottom: 24px; }
.footer-logo-svg { height: 54px; width: auto; max-width: 100%; overflow: hidden; margin-bottom: 16px; display: block; }
.footer-logo-svg svg, .footer-logo-svg img { height: 100%; width: auto; display: block; }
.footer-brand { display: flex; flex-direction: column; }
.footer-brand p { font-size: 13px; color: rgba(255,255,255,.35); line-height: 1.6; }
.footer-col h3 { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.3); font-weight: 600; margin-bottom: 14px; }
.footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,.55); text-decoration: none; padding: 4px 0; transition: color .15s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p { font-size: 12px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; opacity: .8; transition: opacity .2s; }
.social-link:hover { opacity: 1; }
/* DIVIDER */
hr.section-divider { border: none; border-top: 1px solid var(--border); margin: 0; }
/* ANIMATIONS */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.reveal { animation: fadeUp .5s ease both; }
.reveal-2 { animation: fadeUp .5s .1s ease both; }
/* HAMBURGER + DRAWER */
.btn-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; justify-content: center; gap: 4px; width: 36px; height: 36px; }
.btn-burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 1px; transition: transform .2s, opacity .2s; }
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 200; }
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 88vw; background: var(--dark); z-index: 201; transform: translateX(100%); transition: transform .28s ease; display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0,0,0,.35); }
.drawer.open { transform: translateX(0); }
.drawer-header { position: relative; display: flex; align-items: center; justify-content: center; padding: 18px 56px; border-bottom: 1px solid rgba(255,255,255,.1); }
.drawer-don-btn { background: var(--ojim); color: #fff; text-decoration: none; font-family: var(--ff-ui); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 10px 20px; border-radius: 3px; transition: background .15s; white-space: nowrap; }
.drawer-don-btn:hover { background: var(--ojim-dark); color: #fff; }
.drawer-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 22px; color: #fff; padding: 4px 8px; line-height: 1; }
.drawer-nav { display: flex; flex-direction: column; padding: 8px 0; flex: 1; overflow-y: auto; }
.drawer-nav a { display: block; padding: 16px 24px; font-family: var(--ff-ui); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: #ccc; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.1); transition: color .15s, background .15s; }
.drawer-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.drawer-nav a.active { color: var(--ojim); font-weight: 600; }
.drawer-nav a.drawer-don-btn:hover { background: var(--ojim-dark); color: #fff; }
.drawer-socials { display: flex; gap: 18px; align-items: center; justify-content: center; padding: 20px 24px; border-top: 1px solid rgba(255,255,255,.1); }
body.drawer-open { overflow: hidden; }
/* ============== TABLET (≤ 1079px) ============== */
@media (max-width: 1079px) {
#main-nav { display: none; }
.btn-search, #btn-close-search { display: none !important; }
.btn-burger { display: inline-flex; }
#search-bar { display: flex !important; flex: 1; max-width: none; margin: 0 16px; }
.header-inner { gap: 16px; padding: 0 20px; }
.btn-don { padding: 8px 14px; }
.hero-title { font-size: 38px; }
}
/* ============== SMALL TABLET (≤ 879px) ============== */
@media (max-width: 879px) {
.portraits-intro h2 { max-width: 70%; }
}
/* ============== TABLET (≤ 999px) ============== */
@media (max-width: 999px) {
.hero-title { max-width: 100%; }
}
/* ============== MOBILE LARGE (≤ 799px) ============== */
@media (max-width: 799px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-main { padding-right: 0; border-right: none; }
.hero-sidebar {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 24px;
row-gap: 0;
padding-left: 0;
margin-top: 32px;
}
.hero-sidebar .sidebar-title { grid-column: 1 / -1; }
.hero-sidebar > div:last-child { grid-column: 1 / -1; margin-top: 8px; }
.articles-grid { grid-template-columns: repeat(2, 1fr); }
/* 8 en tablette (4×2) tant que la page 1 est seule : la 9e n'est
masquée QUE si elle est aussi la dernière — après « Afficher plus »,
18 cartes = 9 rangées pleines et le masque se lève seul */
#articles-recents .articles-grid > a:nth-child(9):last-child { display: none; }
.dossiers-grid { grid-template-columns: repeat(3, 1fr); }
.dossiers-grid .dossier-card:nth-child(4) { display: none; }
.portraits-intro h2 { max-width: 100%; }
.footer-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-brand { grid-column: 1 / -1; margin-bottom: 8px; }
.newsletter-inner { grid-template-columns: 1fr; gap: 24px; }
.newsletter-form { min-width: 0; }
}
/* ============== TABLET (≤ 899px) ============== */
@media (max-width: 899px) {
.infographie-card { flex-direction: column; gap: 12px; }
.infographie-icon { width: 100%; aspect-ratio: 1/1; }
}
/* ============== MOBILE (≤ 699px) ============== */
@media (max-width: 699px) {
.header-inner, header.scrolled .header-inner { flex-wrap: wrap; height: auto; padding: 12px 20px; }
.header-inner .logo-link { order: 1; }
.header-inner .header-actions { order: 2; margin-left: auto; }
#search-bar { order: 3; flex: none !important; width: 100% !important; max-width: none !important; margin: 10px 0 0 !important; }
.portraits-grid { grid-template-columns: repeat(3, 1fr); }
.dossiers-grid { grid-template-columns: repeat(2, 1fr); }
.dossiers-grid .dossier-card:nth-child(4) { display: block; }
}
/* ============== MOBILE SMALL (≤ 599px) ============== */
@media (max-width: 599px) {
.dossiers-intro { grid-template-columns: 1fr; }
.dossiers-intro h2,
.dossiers-intro p { max-width: 100%; }
.don-cta-mini { width: 100%; min-width: auto; }
}
/* ============== MOBILE EXTRA SMALL (≤ 499px) ============== */
@media (max-width: 499px) {
.topbar { display: none; }
.ticker { display: none; }
.header-inner, header.scrolled .header-inner { padding: 8px 12px; flex-wrap: nowrap; height: auto; align-items: center; gap: 10px; }
.logo-link { width: 48%; justify-content: flex-start; height: auto; order: 1; align-items: center; flex: 0 0 auto; transition: width 0.25s ease; }
.logo-svg-wrap { width: 100%; height: auto; display: block; margin-bottom: 0; }
.logo-svg-wrap .logo-img { width: 100%; height: auto; }
header.scrolled .logo-link { width: 25%; height: auto; }
header.scrolled .logo-svg-wrap { width: 100%; height: auto; }
.header-actions { margin: 0; width: auto; justify-content: flex-end; align-items: center; order: 3; flex: 0 0 auto; transform: translateY(10px); }
.header-actions .btn-don { display: none; }
.header-actions #btn-search, .header-actions #btn-close-search { display: none !important; }
#search-bar { display: flex !important; order: 2; flex: 1 1 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; min-width: 0; transform: translateY(10px); }
.hero-sidebar { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: center; gap: 16px; }
}
/* ============== MOBILE TINY (≤ 399px) ============== */
@media (max-width: 399px) {
.articles-grid { grid-template-columns: 1fr; }
.portraits-grid { grid-template-columns: repeat(2, 1fr); }
.infographies-grid { grid-template-columns: 1fr; }
.dossiers-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* Colonne Soutenir/Nous suivre en pleine largeur : les 6 pictos sur une ligne */
.footer-grid > .footer-col:last-child { grid-column: 1 / -1; }
/* Replace inline search bar with a magnifier button that opens an overlay */
#search-bar { display: none !important; }
.header-actions #btn-search { display: inline-flex !important; align-items: center; justify-content: center; }
.header-inner, header.scrolled .header-inner { gap: 6px; }
.logo-link { width: auto; flex: 1 1 auto; }
header.scrolled .logo-link { width: auto; }
}
/* Fullscreen search overlay */
.search-overlay {
position: fixed; inset: 0; z-index: 1000;
background: rgba(10,10,12,.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex; flex-direction: column; align-items: center;
padding: 80px 24px 24px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.35s cubic-bezier(.4,0,.2,1), visibility 0.35s cubic-bezier(.4,0,.2,1);
}
.search-overlay.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.search-overlay-close {
position: absolute; top: 18px; right: 18px;
background: none; border: none; color: #fff;
font-size: 26px; line-height: 1; cursor: pointer; padding: 8px;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}
.search-overlay.open .search-overlay-close {
opacity: 1;
transform: translateY(0);
}
.search-overlay-inner {
max-width: 640px; margin: 0 auto; width: 100%;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.35s ease 0.08s, transform 0.35s ease 0.08s;
}
.search-overlay.open .search-overlay-inner {
opacity: 1;
transform: translateY(0);
}
#search-overlay-input {
width: 100%; background: transparent; border: none;
border-bottom: 1px solid rgba(255,255,255,.35);
padding: 12px 0; font-family: var(--ff-ui); font-size: 20px;
color: #fff; outline: none; caret-color: var(--accent, #e85d3a);
}
#search-overlay-input::placeholder { color: rgba(255,255,255,.5); }
body.search-overlay-open { overflow: hidden; }
/* ============== Externalized inline styles ============== */
.logo-img { height: 100%; width: auto; display: block; }
#search-bar { display: none; flex: 1; max-width: 520px; margin: 0 24px; align-items: center; }
.search-bar-inner { position: relative; width: 100%; display: flex; align-items: center; }
#search-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.25); padding: 6px 0; font-family: var(--ff-ui); font-size: 14px; color: rgba(255,255,255,.85); outline: none; caret-color: rgba(255,255,255,.45); letter-spacing: .01em; }
#btn-close-search { display: none; background: none; border: none; cursor: pointer; color: rgba(255,255,255,.7); font-size: 22px; line-height: 1; padding: 4px 8px; }
.hero-image-placeholder { background: none; }
.hero-image-placeholder > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.hero-image-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(transparent, rgba(0,0,0,0.65)); pointer-events: none; }
.hero-image-caption { position: absolute; bottom: 0; left: 0; right: 0; color: #fff; padding: 12px 16px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.hero-image-caption strong { color: #fff; font-weight: 600; }
.hero-sidebar-don { margin-top: 20px; }
.article-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-meta .cat-badge { font-size: 8px; padding: 3px 8px; }
.portrait-card-more { display: flex; align-items: center; justify-content: center; }
.portrait-card-more-inner { text-align: center; position: relative; z-index: 1; }
.portrait-card-more-num { font-family: var(--ff-display); font-size: 40px; font-weight: 700; color: rgba(233,87,64,0.5); line-height: 1; }
.portrait-card-more-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-top: 6px; }
.portrait-card-overlay.is-ghost { background: transparent; border-top: 1px solid rgba(255,255,255,.08); }
.portrait-card-overlay.is-ghost .portrait-card-name { font-size: 13px; }
.section-tight { margin-bottom: 20px; }
.dossiers-grid--second { margin-top: 16px; }
.footer-brand p strong { color: rgba(255,255,255,.4); font-size: 11px; }
/* ========== SINGLE ARTICLE ========== */
.single-wrap { background: var(--white); }
article.single { max-width: 1200px; margin: 0 auto; padding: 40px 24px 60px; } /* article. : body porte aussi la classe single (body_class WP) */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; color: var(--light); margin-bottom: 28px; padding-bottom: 14px; position: relative; min-width: 0; }
.breadcrumb a { color: var(--light); text-decoration: none; transition: color .2s ease; }
.breadcrumb a:hover { color: var(--dark); }
.breadcrumb > span:last-child { color: var(--dark); min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb-sep { margin: 0 6px; color: var(--border); font-weight: 400; }
.breadcrumb::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 1px; background: var(--ojim); }
.single-title { font-family: var(--ff-display); font-weight: 700; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; color: var(--dark); margin-bottom: 18px; letter-spacing: -0.01em; }
.single-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 13px; color: var(--mid); padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.single-meta .dot { width: 3px; height: 3px; background: var(--light); border-radius: 50%; }
.single-share a, .single-share button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 50%; transition: all .15s; background: #fff; cursor: pointer; padding: 0; }
.single-share a img[src*="social-x"] { filter: brightness(0); transition: filter .15s; }
.single-share a:hover { border-color: var(--ojim); background: var(--ojim); }
.single-share a:hover img { filter: brightness(0) invert(1); }
.single-hero { position: relative; margin: 0 0 32px; aspect-ratio: 16/9; overflow: hidden; cursor: pointer; background: #1a1a18; }
.single-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.5s ease; }
.single-hero:hover img { transform: scale(1.04); }
.single-hero-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(transparent, rgba(0,0,0,0.65)); pointer-events: none; }
.single-hero-caption { position: absolute; bottom: 0; left: 0; right: 0; color: #fff; padding: 12px 24px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; font-style: normal; }
.single-hero-caption strong { color: #fff; font-weight: 600; }
.single-columns { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.single-main { min-width: 0; }
.single-sidebar { position: sticky; top: var(--sticky-top); align-self: start; display: flex; flex-direction: column; gap: 20px; }
.single-share-box { background: var(--warm); border: 1px solid var(--border); border-radius: 4px; padding: 18px 22px; }
.single-share-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--dark); margin-bottom: 12px; }
.single-share { display: flex; gap: 8px; flex-wrap: wrap; }
.single-lead { font-family: var(--ff-display); font-size: 20px; line-height: 1.5; color: var(--dark); font-weight: 500; margin-bottom: 32px; padding-left: 16px; border-left: 3px solid var(--ojim); }
.single-toc { background: var(--warm); border: 1px solid var(--border); border-radius: 4px; padding: 18px 22px; margin-bottom: 36px; }
.single-toc-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
.single-toc ol { list-style: none; counter-reset: toc; padding: 0; }
.single-toc li { counter-increment: toc; font-size: 14px; padding: 4px 0; }
.single-toc li::before { content: counter(toc, decimal-leading-zero) "."; color: var(--ojim); font-weight: 700; margin-right: 8px; }
.single-toc a { color: var(--ink); text-decoration: none; }
.single-toc a:hover { color: var(--ojim); }
.single-body { font-size: 17px; line-height: 1.75; color: var(--ink); }
.single-body p { margin-bottom: 22px; }
.single-body h2 { font-family: var(--ff-display); font-size: 29px; font-weight: 700; color: var(--dark); margin: 42px 0 18px; line-height: 1.25; }
.single-body a { color: var(--ojim); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.single-body a:hover { color: var(--ojim-dark); }
.single-body blockquote { border-left: 3px solid var(--ojim); padding: 8px 0 8px 22px; margin: 28px 0; font-style: italic; color: var(--dark); font-size: 18px; }
.single-byline { margin-top: 28px; font-style: italic; font-weight: 600; color: var(--dark); font-size: 15px; }
.single-donate { margin-top: 36px; padding: 28px; background: var(--dark); color: #fff; border-radius: 4px; text-align: center; }
.single-donate h3 { font-family: var(--ff-display); font-size: 22px; margin-bottom: 10px; color: #fff; }
.single-donate p { font-size: 14px; color: rgba(255,255,255,.75); margin-bottom: 18px; }
.single-donate .btn-don-full { display: inline-block; }
.single-related { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--border); }
.single-related-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.single-related-title { font-family: var(--ff-display); font-size: 28px; font-weight: 600; color: var(--dark); }
.single-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.single-related-grid .article-title { font-size: 17px; line-height: 1.3; }
.single-related-grid .article-img { margin-bottom: 12px; }
@media (max-width: 900px) {
.single-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
article.single { padding: 28px 18px 40px; }
.single-columns { grid-template-columns: 1fr; gap: 32px; }
.single-sidebar { position: static; order: -1; }
.single-hero { margin: 0 0 24px; }
.single-hero-caption { padding: 10px 14px; }
.single-lead { font-size: 17px; }
.single-body { font-size: 16px; }
.single-related-grid { grid-template-columns: 1fr; }
}
/* PAGENAV */
.pagenav { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
.pagenav-item, .pagenav-next { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--border); background: var(--white); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 3px; transition: background .15s, color .15s, border-color .15s; }
.pagenav-item:hover, .pagenav-next:hover { background: var(--warm); border-color: var(--light); color: var(--dark); }
.pagenav-item.is-active { background: var(--ojim); border-color: var(--ojim); color: #fff; cursor: default; }
.pagenav-ellipsis { color: var(--mid); padding: 0 6px; font-weight: 600; }
.pagenav-next { margin-left: 6px; }
/* ════════ V2 — refonte header, nouveaux gabarits, composants ════════ */
/* ================================================================
NOUVEAUX TEMPLATES — CSS à reporter dans main.css
================================================================ */
/* ---------- ARCHIVE / TAXONOMIE ---------- */
.archive-hero { background: var(--white); padding: 32px 0 30px; border-bottom: 1px solid var(--border); }
.archive-hero .breadcrumb { margin-bottom: 24px; }
.archive-kicker { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--ojim); margin-bottom: 10px; }
.archive-title { font-family: var(--ff-display); font-size: clamp(32px, 4.5vw, 48px); font-weight: 600; color: var(--dark); line-height: 1.08; margin-bottom: 12px; }
.archive-desc { font-size: 16px; line-height: 1.7; color: var(--mid); max-width: 640px; }
.archive-meta { margin-top: 16px; font-size: 11px; color: var(--light); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.archive-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.archive-filter { font-family: var(--ff-ui); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); text-decoration: none; border: 1px solid var(--border); padding: 8px 15px; border-radius: 999px; background: #fff; transition: border-color .15s, color .15s, background .15s; }
.archive-filter:hover { border-color: var(--ojim); color: var(--ojim); }
.archive-filter.is-active { background: var(--dark); border-color: var(--dark); color: #fff; }
.archive-list { background: var(--white); padding: 36px 0 56px; }
/* ---------- PAGE ---------- */
.page-wrap { background: var(--white); padding: 36px 0 64px; }
.page-inner { max-width: 780px; margin: 0 auto; }
.page-title { font-family: var(--ff-display); font-size: clamp(30px, 4.2vw, 44px); font-weight: 700; line-height: 1.1; color: var(--dark); letter-spacing: -.01em; margin-bottom: 14px; }
.page-updated { font-size: 13px; color: var(--mid); padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 30px; }
.page-body { font-size: 17px; line-height: 1.75; color: var(--ink); }
.page-body p { margin-bottom: 22px; }
.page-body h2 { font-family: var(--ff-display); font-size: 29px; font-weight: 700; color: var(--dark); margin: 42px 0 18px; line-height: 1.25; }
.page-body a { color: var(--ojim); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.page-body a:hover { color: var(--ojim-dark); }
.page-body ul { margin: 0 0 22px 20px; }
.page-body li { margin-bottom: 8px; }
.page-body blockquote { border-left: 3px solid var(--ojim); padding: 8px 0 8px 22px; margin: 28px 0; font-style: italic; color: var(--dark); font-size: 18px; }
.page-cta { margin-top: 44px; }
/* ---------- RECHERCHE ---------- */
.search-hero { background: var(--dark); padding: 40px 0 36px; border-bottom: 3px solid var(--ojim); }
.search-hero-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.4); margin-bottom: 16px; }
.search-hero-form { max-width: 720px; position: relative; }
.search-hero-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.35); padding: 10px 44px 12px 0; font-family: var(--ff-display); font-size: clamp(24px, 3.4vw, 36px); font-weight: 600; color: #fff; outline: none; caret-color: var(--ojim); }
.search-hero-input::placeholder { color: rgba(255,255,255,.35); }
.search-hero-input:focus { border-bottom-color: var(--ojim); }
.search-hero-submit { position: absolute; right: 0; bottom: 14px; background: none; border: none; cursor: pointer; padding: 6px; line-height: 0; opacity: .7; transition: opacity .15s; }
.search-hero-submit:hover { opacity: 1; }
.search-count { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.5); }
.search-count strong { color: #fff; font-weight: 600; }
div.search-results { background: var(--white); padding: 30px 0 56px; } /* div. : body porte aussi search-results (body_class WP) */
.search-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.search-tab { font-family: var(--ff-ui); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); text-decoration: none; border: 1px solid var(--border); padding: 8px 15px; border-radius: 999px; background: #fff; transition: border-color .15s, color .15s, background .15s; }
.search-tab:hover { border-color: var(--ojim); color: var(--ojim); }
.search-tab.is-active { background: var(--dark); border-color: var(--dark); color: #fff; }
.search-tab .count { color: inherit; opacity: .55; margin-left: 4px; font-weight: 600; }
.search-result { display: grid; grid-template-columns: 220px 1fr; gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--border); text-decoration: none; align-items: start; }
.search-result:last-of-type { border-bottom: none; }
.search-result-img { aspect-ratio: 16/9; border-radius: 2px; background: var(--parchment); overflow: hidden; align-self: start; }
.search-result-img.is-square { aspect-ratio: 1/1; }
.search-result-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.search-result:hover .search-result-img img { transform: scale(1.04); }
.search-result-title { font-family: var(--ff-display); font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--dark); margin: 8px 0; transition: color .15s; }
.search-result:hover .search-result-title { color: var(--ojim); }
.search-result-excerpt { font-size: 14.5px; line-height: 1.65; color: var(--mid); }
.search-result mark { background: rgba(233,87,64,.16); color: inherit; padding: 0 2px; border-radius: 2px; }
.search-noresult { padding: 48px 0; text-align: center; color: var(--mid); }
@media (max-width: 600px) {
.search-result { grid-template-columns: 1fr; gap: 12px; }
.search-result-img.is-square { max-width: 200px; }
}
/* ---------- AJUSTEMENT SINGLE : héros aligné sur la colonne de texte ---------- */
@media (min-width: 601px) {
.single-hero { max-width: calc(100% - 380px); } /* 340px sidebar + 40px gap */
}
/* ---------- WIDGET PARTAGER : correctifs pictos ---------- */
/* X en noir via une classe (le ciblage par src casse avec CDN/base64) */
.single-share a img.icon-x { filter: brightness(0); }
/* Nouveau picto lien (inline SVG, stroke) */
.single-share a svg.icon-link { stroke: #1A1A18; transition: stroke .15s; }
.single-share a:hover svg.icon-link { stroke: #fff; }
/* ================================================================
REFONTE HEADER — burger à gauche, logo centré, rubriques dessous
================================================================ */
/* Dimensionnement du logo SVG inline (correctif : le CSS d'origine ne ciblait que ![]()
) */
.logo-svg-wrap svg, .footer-logo-svg svg { height: 100%; width: auto; display: block; }
/* Grille 3 zones : burger | logo | actions */
.header-inner, header.scrolled .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 82px; padding: 0 24px; gap: 16px; }
.btn-burger { display: none !important; justify-self: start; }
@media (max-width: 1079px) {
.btn-burger { display: inline-flex !important; }
}
/* Desktop : logo au bord gauche, don au bord droit — même gabarit que .container (1200px) */
@media (min-width: 1080px) {
.header-inner, header.scrolled .header-inner { grid-template-columns: auto 1fr; }
.logo-link, header.scrolled .logo-link { justify-self: start; }
}
.logo-link, header.scrolled .logo-link { justify-self: center; height: 58px; width: auto; }
.logo-svg-wrap, header.scrolled .logo-svg-wrap { height: 100%; margin: 0; }
.header-actions, header.scrolled .header-actions { justify-self: end; transform: none; }
header.scrolled .header-inner { height: 62px; }
header.scrolled .logo-link { height: 46px; }
/* Recherche : icône visible partout, ouverture en overlay plein écran */
.btn-search { display: inline-flex !important; align-items: center; justify-content: center; color: rgba(255,255,255,.85); }
#btn-close-search, #search-bar { display: none !important; }
/* Barre de rubriques sous le header (desktop) — alignée à gauche sur le gabarit */
#main-nav { display: flex; justify-content: flex-start; gap: 2px; max-width: 1200px; margin: 0 auto; padding: 0 24px 10px; border-top: none; }
#main-nav a:first-child { margin-left: -10px; } /* compense le padding du lien : le texte s'aligne sur le logo */
#main-nav a { padding: 6px 10px; letter-spacing: .08em; }
@media (max-width: 1079px) {
#main-nav { display: none !important; }
}
/* Mobile : neutraliser les repositionnements de l'ancien layout */
@media (max-width: 499px) {
.header-inner, header.scrolled .header-inner { height: 64px; padding: 0 14px; gap: 8px; }
.logo-link, header.scrolled .logo-link { height: 41px; width: auto; flex: none; transform: none; order: 0; }
.logo-svg-wrap, header.scrolled .logo-svg-wrap { width: auto; height: 100%; }
.header-actions { transform: none; order: 0; width: auto; }
.header-actions .btn-search, .header-actions #btn-search { display: inline-flex !important; }
}
/* ---------- HOME : grille portraits doublée (12 cartes) ---------- */
/* Desktop 6 col × 2 lignes · Tablette 4 col × 3 lignes · Mobile 3 col × 4 lignes */
@media (max-width: 980px) {
.portraits-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
.portraits-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.portrait-card-name { font-size: 11px; }
}
/* ---------- FOOTER : second titre dans une colonne (Nous suivre) ---------- */
.footer-col h3 + a ~ h3, .footer-col h3:not(:first-child) { margin-top: 22px; }
/* ---------- FOOTER : pictos réseaux sociaux (glyphes nus en couleur) ---------- */
.footer-socials { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-top: 8px; }
.footer-social { display: inline-flex; align-items: center; }
.footer-social img, .footer-social svg { display: block; }
/* ---------- NAV : 9 rubriques — resserrage pour tenir sur une ligne ---------- */
#main-nav a { padding: 6px 7px; letter-spacing: .07em; }
/* ---------- ENCADRÉ OEMBED (cartes « Voir aussi », internes et externes) ---------- */
/* Modèle maquette : image bord à bord pleine hauteur à gauche (source carrée,
recadrée en cover), texte à droite, domaine cible en pied. Carte = . */
a.ojim-embed, a.ojim-embed * { text-decoration: none !important; }
/* border-bottom:0 réservé aux descendants : appliqué à la carte elle-même,
il effaçait sa propre bordure basse (bug corrigé). */
a.ojim-embed * { border-bottom: 0 !important; }
/* Carte « Voir aussi » alignée sur l'UI des encadrés infographie
(décision : vignette 1:1 compacte, bandeau, filet subtil — un peu plus
haute car plus d'informations ; symétrie conservée : titre et extrait
plafonnés ET réservés, source ancrée au bas). */
.ojim-embed { display: flex; gap: 22px; background: var(--warm); border: 1px solid var(--border); border-radius: 2px; padding: 24px; margin: 32px 0; transition: border-color .15s; }
.ojim-embed:hover { border-color: var(--ojim); box-shadow: none; }
.ojim-embed-img { width: 176px; aspect-ratio: 1/1; align-self: flex-start; flex-shrink: 0; border-radius: 2px; overflow: hidden; background: var(--parchment); position: relative; min-height: 0; }
.single-body .ojim-embed-img img, .page-body .ojim-embed-img img, .ojim-embed-img img {
width: 100%; height: 100%; object-fit: cover; display: block; margin: 0;
transition: transform .4s ease; transform: scale(1.01); backface-visibility: hidden;
}
.ojim-embed:hover .ojim-embed-img img { transform: scale(1.05); }
.ojim-embed-body { padding: 2px 0 0; min-width: 0; display: flex; flex-direction: column; flex: 1; }
.ojim-embed-kicker { display: flex; align-items: center; gap: 10px; font-family: var(--ff-ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--ojim); margin-bottom: 8px; }
.ojim-embed-kicker::after { content: ''; width: 24px; height: 3px; background: var(--ojim); border-radius: 2px; }
.ojim-embed-title {
font-family: var(--ff-display); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--dark); margin: 0 0 4px; transition: color .15s;
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: calc(2 * 1.2em);
}
.ojim-embed:hover .ojim-embed-title { color: var(--ojim); }
.ojim-embed-excerpt { font-family: var(--ff-body); font-size: 14px; line-height: 1.5; color: var(--mid); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.5em); }
.ojim-embed-source { display: flex; align-items: center; gap: 6px; font-family: var(--ff-ui); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--light); margin-top: auto; padding-top: 6px; }
.ojim-embed-arrow { font-size: 12px; transition: transform .15s; }
.ojim-embed:hover .ojim-embed-source { color: var(--mid); }
.ojim-embed:hover .ojim-embed-arrow { transform: translate(2px, -2px); }
.ojim-embed--noimg { padding-left: 24px; }
@media (max-width: 600px) {
.ojim-embed { gap: 14px; padding: 16px; }
.ojim-embed-img { width: 84px; } /* la vignette 1:1 compacte tient en mobile */
.ojim-embed-title { font-size: 17px; }
.ojim-embed-excerpt { display: none; } /* mobile : l'essentiel — kicker, titre, source */
.ojim-embed-title { font-size: 17px; margin-bottom: 6px; }
.ojim-embed-excerpt { -webkit-line-clamp: 2; line-clamp: 2; font-size: 13px; }
.ojim-embed-kicker { font-size: 10px; margin-bottom: 6px; }
.ojim-embed-source { margin-top: 8px; font-size: 10px; }
}
/* ---------- ARCHIVE PORTRAITS ---------- */
.portraits-archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 20px; }
.portraits-archive-grid .article-img { aspect-ratio: 1 / 1; }
.portraits-archive-grid .article-img img { object-position: center 25%; } /* biais haut : cadre les visages */
.portraits-archive-grid .article-title { font-size: 17px; }
@media (max-width: 980px) { .portraits-archive-grid { grid-template-columns: repeat(3, 1fr); gap: 20px 16px; } }
@media (max-width: 600px) { .portraits-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; } }
.portrait-item-media { font-family: var(--ff-ui); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--light); margin-top: 5px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.filter-row + .filter-row { margin-top: 12px; }
.filter-row-label { font-family: var(--ff-ui); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--light); margin-right: 4px; min-width: 74px; }
.loadmore-wrap { text-align: center; margin-top: 40px; }
.btn-loadmore { display: inline-flex; align-items: center; gap: 10px; background: var(--dark); color: #fff; text-decoration: none; font-family: var(--ff-ui); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 14px 28px; border-radius: 999px; border: none; cursor: pointer; transition: background .15s; }
.btn-loadmore:hover { background: var(--ojim); }
.btn-loadmore[disabled] { opacity: .45; cursor: default; }
.loadmore-count { font-family: var(--ff-ui); font-size: 11px; letter-spacing: .08em; color: var(--light); margin-top: 10px; text-transform: uppercase; }
/* ---------- SINGLE INFOGRAPHIE ---------- */
.infog-figure { margin: 4px 0 20px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: #fff; }
.infog-figure img { width: 100%; height: auto; display: block; }
.infog-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.btn-pdf { display: inline-flex; align-items: center; gap: 10px; background: var(--dark); color: #fff; text-decoration: none; font-family: var(--ff-ui); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 13px 22px; border-radius: 999px; transition: background .15s; }
.btn-pdf:hover { background: var(--ojim); }
.btn-pdf svg { flex-shrink: 0; }
/* ---------- TAXONOMIE INFOGRAPHIES : grille carrée 1:1 ---------- */
.infog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.infog-grid .article-img { aspect-ratio: 1 / 1; }
.infog-grid .article-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.infog-grid .article-title { font-size: 17px; }
@media (max-width: 980px) { .infog-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (max-width: 600px) { .infog-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
/* ---------- SECTION ACTUALITÉ DU PORTRAIT ---------- */
.actu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; } /* trait supérieur retiré : la section .single-related qui l'enveloppe porte déjà le sien */
.actu-title { margin: 0; }
.actu-kicker { display: flex; align-items: center; gap: 12px; font-family: var(--ff-ui); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--ojim); margin-bottom: 10px; }
.actu-kicker::after { content: ''; width: 28px; height: 3px; background: var(--ojim); border-radius: 2px; }
.actu-name { display: block; font-family: var(--ff-display); font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.1; color: var(--dark); }
.actu-count { font-family: var(--ff-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--light); padding-bottom: 6px; white-space: nowrap; }
@media (max-width: 600px) { .actu-count { display: none; } }
/* ---------- PORTRAIT (gabarit de page basé sur single) ---------- */
.single-body h3, .page-body h3 { font-family: var(--ff-display); font-size: 23px; font-weight: 700; color: var(--dark); margin: 32px 0 14px; line-height: 1.3; }
.single-body ul { margin: 0 0 22px 20px; }
.single-body ul li { margin-bottom: 8px; }
.single-body .voir-aussi { font-size: 14px; font-weight: 600; padding: 12px 16px; background: var(--warm); border-left: 3px solid var(--ojim); margin: 28px 0; }
.portrait-head { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: start; margin-bottom: 36px; }
.portrait-photo { aspect-ratio: 3/4; overflow: hidden; border-radius: 2px; background: var(--dark); }
.portrait-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.portrait-head-main { min-width: 0; }
.portrait-function { font-family: var(--ff-display); font-size: 19px; font-style: italic; color: var(--mid); margin: -8px 0 18px; line-height: 1.4; }
.portrait-idcard { background: var(--warm); border: 1px solid var(--border); border-radius: 4px; padding: 20px 24px; }
.portrait-idcard-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--dark); margin-bottom: 12px; }
.portrait-idcard dl { display: grid; grid-template-columns: 130px 1fr; row-gap: 8px; column-gap: 16px; margin: 0; font-size: 14px; }
.portrait-idcard dt { color: var(--light); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.portrait-idcard dd { color: var(--ink); margin: 0; }
.portrait-related-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 900px) {
.portrait-related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.portrait-head { grid-template-columns: 1fr; gap: 24px; }
/* Mobile : photo en 1:1 (au lieu de 3/4) — hauteur réduite, visage préservé
grâce au cadrage haut déjà en place. Pleine largeur du contenu (le
plafond 320px laissait un vide à droite sur les grands mobiles). */
.portrait-photo { max-width: 100%; width: 100%; aspect-ratio: 1 / 1; }
.portrait-related-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- 404 ---------- */
.error-section { background: var(--white); padding: 64px 0 84px; text-align: center; }
.error-code { font-family: var(--ff-display); font-size: clamp(110px, 22vw, 210px); font-weight: 700; line-height: .9; color: var(--parchment); position: relative; user-select: none; }
.error-code::after { content: ''; display: block; width: 48px; height: 3px; background: var(--ojim); margin: 26px auto 0; }
.error-title { font-family: var(--ff-display); font-size: clamp(24px, 3.4vw, 34px); font-weight: 600; color: var(--dark); margin-top: 26px; }
.error-text { font-size: 16px; line-height: 1.7; color: var(--mid); max-width: 520px; margin: 14px auto 0; }
.error-search { max-width: 460px; margin: 32px auto 0; display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: #fff; }
.error-search input { flex: 1; border: none; outline: none; padding: 13px 22px; font-family: var(--ff-ui); font-size: 14px; color: var(--ink); background: transparent; min-width: 0; }
.error-search button { background: var(--ojim); color: #fff; border: none; padding: 0 22px; font-family: var(--ff-ui); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .15s; }
.error-search button:hover { background: var(--ojim-dark); }
.error-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.error-links a { font-family: var(--ff-ui); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); text-decoration: none; border: 1px solid var(--border); padding: 8px 15px; border-radius: 999px; transition: border-color .15s, color .15s; }
.error-links a:hover { border-color: var(--ojim); color: var(--ojim); }
/* ════════ THÈME — compléments ════════ */
/* Retour visuel « lien copié » (widget Partager) */
/* Encadré oEmbed sans vignette */
/* Logo personnalisé (the_custom_logo) : même gabarit que le logo par défaut */
.logo-link .custom-logo-link { display: block; height: 100%; }
.logo-link .custom-logo { height: 100%; width: auto; display: block; }
.footer-logo-svg .custom-logo { height: 50px; width: auto; }
/* ════════ THÈME — structure ════════ */
/* est le conteneur de page des templates PHP. Le body étant en flex,
sans ces règles il ne s'étire pas : d'où l'effet « boxed » sur fond gris. */
main { width: 100%; flex: 1 0 auto; }
main > .single-wrap, main > .page-wrap, main > .archive-list, main > .search-results { background: var(--white); }
/* ════════ THÈME — table des matières (LuckyWP TOC) ════════ */
/* Le plugin sort son propre markup : on le rhabille aux couleurs de la maquette
et on neutralise ses styles inline. */
.lwptoc { background: var(--warm) !important; border: 1px solid var(--border); border-radius: 4px; margin: 32px 0; padding: 0; }
.lwptoc_i { background: none !important; border: none !important; box-shadow: none !important; padding: 22px 26px !important; }
.lwptoc_header { margin-bottom: 14px !important; }
.lwptoc_title { font-family: var(--ff-ui) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--dark) !important; }
.lwptoc_toggle { margin-left: 10px; }
.lwptoc_toggle_label { font-family: var(--ff-ui); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--light) !important; text-decoration: none !important; border-bottom: none !important; }
.lwptoc_toggle_label:hover { color: var(--ojim) !important; }
.lwptoc_items { font-size: 15px !important; }
.lwptoc_item { margin: 0 !important; padding: 0 !important; }
.lwptoc_itemWrap { padding-left: 0 !important; }
.lwptoc_item > a, .lwptoc_item a { display: inline-block; color: var(--dark) !important; text-decoration: none !important; border-bottom: none !important; padding: 7px 0; line-height: 1.4; transition: color .15s; }
.lwptoc_item a:hover { color: var(--ojim) !important; }
/* Numérotation orange façon maquette (le plugin est réglé sur numeration: none) */
.lwptoc_items { counter-reset: lwptoc; }
.lwptoc_item > a::before {
counter-increment: lwptoc;
content: counter(lwptoc, decimal-leading-zero) ".";
display: inline-block;
min-width: 26px;
font-family: var(--ff-ui);
font-size: 12px;
font-weight: 700;
color: var(--ojim);
letter-spacing: .04em;
}
/* Sous-niveaux : pas de numéro, léger retrait */
.lwptoc_item .lwptoc_itemWrap .lwptoc_item > a::before { content: none; }
.lwptoc_item .lwptoc_itemWrap { padding-left: 26px !important; }
.lwptoc_item .lwptoc_itemWrap .lwptoc_item > a { font-size: 14px; color: var(--mid) !important; padding: 5px 0; }
/* Légende du héros : gérée par les classes maquette single-hero-gradient /
single-hero-caption (dégradé léger en bas d'image, validé). */
/* ════════ THÈME — médias dans le contenu ════════ */
/* Garde-fou absent de la maquette (images calibrées) : le contenu WP réel
arrive avec des largeurs arbitraires. */
.single-body img, .page-body img { max-width: 100%; height: auto; }
.single-body figure, .page-body figure { max-width: 100%; margin: 28px 0; }
.single-body iframe, .page-body iframe { max-width: 100%; }
.single-body .wp-caption { max-width: 100%; }
.single-body .wp-caption-text, .single-body figure:not(.single-hero) figcaption { font-size: 12.5px; color: var(--mid); margin-top: 8px; line-height: 1.5; }
/* Iframes du contenu : neutraliser la bordure inset par défaut des navigateurs
(visible dès qu'une iframe arrive sans attribut frameborder, ex. Infogram). */
.single-body iframe, .page-body iframe { border: 0; }
/* Infogram : le div .infogram-embed est REMPLACÉ par une iframe au chargement
(loader déplacé en footer par inc/embeds-infogram.php) — on cible les deux états.
PAS de width:100% forcé : le loader dimensionne à la taille native de
l'infographie ; on centre et on plafonne à la colonne. */
.single-body .infogram-embed { margin: 28px 0 0; min-height: 60px; }
.single-body iframe[src*="e.infogram.com"], .single-body .infogram-embed iframe { display: block; max-width: 100%; margin: 28px auto 0; }
/* Crédit normalisé côté PHP */
.single-body .ojim-embed-credit { text-align: center; margin: 4px 0 28px; padding: 6px 0; border-top: 1px solid var(--border); }
.single-body .ojim-embed-credit a { font-family: var(--ff-ui); font-size: 11px; letter-spacing: .04em; color: var(--light) !important; border-bottom: none !important; text-decoration: none !important; }
.single-body .ojim-embed-credit a:hover { color: var(--ojim) !important; }
/* Tweets embarqués : centrés, avec de l'air */
.single-body .twitter-tweet { margin: 28px auto !important; }
/* ════════ THÈME — auteurs ════════ */
/* Author box (fin d'article / portrait) */
.author-box { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start; background: var(--warm); border: 1px solid var(--border); border-radius: 10px; padding: 26px 28px; margin: 40px 0 0; }
.author-box-avatar img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; }
.author-box-name { font-family: var(--ff-display); font-size: 21px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.author-box-bio { font-size: 14.5px; line-height: 1.65; color: var(--mid); margin: 0 0 12px; }
.author-box-link { font-family: var(--ff-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ojim); text-decoration: none; border-bottom: none !important; }
.author-box-link:hover { color: var(--ojim-dark); }
@media (max-width: 600px) {
.author-box { grid-template-columns: 64px 1fr; gap: 16px; padding: 18px; }
.author-box-avatar img { width: 64px; height: 64px; }
}
/* Page auteur */
.author-wrap { background: var(--white); padding: 52px 0 64px; }
.author-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 60px; align-items: start; }
.author-side { position: sticky; top: var(--sticky-top); align-self: start; }
.author-side-avatar img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; display: block; }
.author-side-name { font-family: var(--ff-display); font-size: 36px; font-weight: 700; color: var(--dark); line-height: 1.1; margin: 22px 0 10px; }
.author-side-status { font-family: var(--ff-ui); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ojim); }
.author-side-status::after { content: ''; display: block; width: 34px; height: 3px; background: var(--ojim); border-radius: 2px; margin-top: 16px; }
.author-side-bio { font-family: var(--ff-display); font-size: 16.5px; line-height: 1.7; color: var(--ink); margin-top: 22px; }
.author-side-meta { margin-top: 26px; display: grid; gap: 10px; font-family: var(--ff-ui); font-size: 13.5px; color: var(--mid); }
.author-side-meta svg { vertical-align: -2px; margin-right: 6px; color: var(--light); }
/* Liste des articles : composant standard (cartes .articles-grid),
en 2 colonnes dans la colonne auteur (plus étroite que les archives). */
.author-posts .articles-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
@media (max-width: 600px) { .author-posts .articles-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
.author-layout { grid-template-columns: 1fr; gap: 34px; }
.author-side { position: static; }
.author-side-avatar img { width: 120px; height: 120px; }
}
/* Instagram : carte statique (aucune iframe — rendu identique partout) */
.ojim-ig { margin: 28px auto; max-width: 560px; background: var(--warm); border: 1px solid var(--border); border-radius: 10px; padding: 26px 28px; text-align: center; }
.ojim-ig .ojim-embed-kicker { justify-content: center; }
.ojim-ig-handle { font-family: var(--ff-display); font-size: 19px; font-weight: 700; color: var(--dark); margin: 6px 0 16px; }
.ojim-ig-note { font-size: 13.5px; line-height: 1.6; color: var(--mid); margin: 0 0 18px; }
.ojim-ig-open { display: inline-block; background: var(--ojim); color: #fff !important; font-family: var(--ff-ui); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 11px 22px; border-radius: 3px; text-decoration: none !important; border-bottom: none !important; transition: background .15s; }
.ojim-ig-open:hover { background: var(--ojim-dark); }
/* Infographie : la vignette est cliquable (télécharge le PDF) */
.infog-figure a { display: block; cursor: pointer; }
/* fondu : règle globale a:hover */
/* ════════ INTERACTION GLOBALE ════════
Toute zone cliquable (liens texte, images liées, cartes, boutons) répond
au survol par un léger fondu. Exception : le logo du header. */
a { transition: opacity .35s ease; }
a:hover { opacity: .9; }
header .logo-link:hover, header .logo-link:hover img { opacity: 1; }
#wpadminbar a:hover { opacity: 1; } /* barre d'admin : hors périmètre design */
/* ════════ HOME : section À la une (2 épinglés, 16:9) ════════ */
.featured-section { background: var(--white); padding: 38px 0 6px; }
.featured-section .section-label { margin-bottom: 20px; }
.featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 28px; }
.featured-grid .article-title { font-size: 24px; line-height: 1.22; }
.featured-grid .article-excerpt { font-size: 15px; }
@media (max-width: 800px) { .featured-grid { grid-template-columns: 1fr; } }
/* Débordements : césure de secours sur les titres de listes */
.mini-title, .search-result-title { overflow-wrap: anywhere; }
/* Réseaux de l'auteur (fiche) : même composant que le footer */
.author-side .author-socials { margin-top: 24px; }
/* Le glyphe X est blanc (conçu pour le footer sombre) : noir sur fond clair */
.author-socials .is-x img { filter: brightness(0); }
/* Pagenav de la section Articles récents (home) */
.veille-section .pagenav { margin-top: 36px; }
/* ════════ CHARGEMENT DES IMAGES : zone grise + spinner + fondu ════════
Pendant le chargement : zone gris clair avec spinner à la place du rendu
navigateur (image cassée / texte alt — Firefox l'affiche même en cours de
chargement). Le héros et les images fetchpriority=high restent exclus (LCP).
Sans JS : pas de spinner, mais le alt reste masqué et le fond propre. */
/* Le texte alt se rend avec la couleur du texte : transparent = jamais visible
dans les conteneurs de vignettes, JS ou pas. */
.article-img img, .portrait-card-img img, .ojim-embed-img img,
.infographie-icon img, .infog-figure img, .search-result-img img { color: transparent; }
.img-loading { position: relative; background: #ECECEA; }
.img-loading::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 22px; height: 22px;
margin: -11px 0 0 -11px;
border: 2px solid #DDDDDA;
border-top-color: var(--ojim);
border-radius: 50%;
animation: ojim-spin .8s linear infinite;
}
.img-loading img { opacity: 0; transition: opacity .45s ease, transform .5s ease; }
.img-loading.is-loaded::before { display: none; }
.img-loading.is-loaded img { opacity: 1; }
/* Image définitivement cassée : zone grise nue, sans spinner ni icône cassée */
.img-loading.is-error::before { display: none; }
.img-loading.is-error img { opacity: 0; }
@keyframes ojim-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.img-loading::before { animation: none; }
.img-loading img { transition: none; }
}
/* À lire aussi à 6 : la seconde rangée respire */
.single-related-grid { row-gap: 34px; }
/* Newsletter : message d'état */
.newsletter-msg { min-height: 20px; margin-top: 10px; font-family: var(--ff-ui); font-size: 13px; }
.newsletter-msg .is-ok { color: #7FC97F; }
.newsletter-msg .is-err { color: #F2A099; }
/* ════════ ENCART PROMOTIONNEL (4:1) ════════
ATTENTION : ne jamais nommer ces classes ad-*, pub-*, banner-*, sponsor-* —
ces motifs figurent dans les filtres cosmétiques des bloqueurs (EasyList)
et la zone serait masquée chez une grande partie du lectorat. Même règle
pour les NOMS DE FICHIERS des visuels (pas de publicite/ad dans l'URL). */
.encart { margin: 0 0 6px; }
.encart-mention { text-align: center; font-family: var(--ff-ui); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--light); margin-bottom: 8px; }
.encart-visuel { display: block; aspect-ratio: 5 / 1; overflow: hidden; border-radius: 4px; background: var(--parchment); }
.encart-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.encart-section { background: var(--white); }
.encart-section .encart { padding: 26px 0 4px; margin: 0; }
article.single .encart { margin-bottom: 30px; }
/* Annuaire : état de chargement pendant le filtrage.
Le contenu s'estompe, un spinner central indique l'activité (même langage
que le chargement des images), les clics sont gelés le temps du fetch. */
#portraits-app { position: relative; }
#portraits-app.is-loading { pointer-events: none; }
#portraits-app.is-loading > * { opacity: .4; transition: opacity .2s; }
#portraits-app.is-loading::after {
content: '';
position: absolute;
top: 340px;
left: 50%;
width: 30px; height: 30px;
margin-left: -15px;
border: 3px solid var(--border);
border-top-color: var(--ojim);
border-radius: 50%;
animation: ojim-spin .8s linear infinite;
z-index: 5;
}
@media (prefers-reduced-motion: reduce) {
#portraits-app.is-loading::after { animation: none; }
}
/* ── Widget Partager : retour visuel du bouton Copier ──
Clic enfoncé : le picto passe à l'orange OJIM ; relâché : retour normal ;
copie réussie : bulle « Lien copié » qui s'estompe d'elle-même. */
.single-share a:active { opacity: .45; }
.single-share [data-copy-link] { position: relative; }
.single-share [data-copy-link]:active .icon-link { stroke: var(--ojim); }
.single-share [data-copy-link].is-copied .icon-link { stroke: var(--ojim); }
.single-share [data-copy-link].is-copied::after {
content: 'Lien copié';
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translateX(-50%);
background: var(--dark);
color: #fff;
font-family: var(--ff-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
padding: 6px 11px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
animation: ojim-copied 1.8s ease forwards;
}
@keyframes ojim-copied {
0% { opacity: 0; }
10% { opacity: 1; }
75% { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.single-share [data-copy-link].is-copied::after { animation: none; opacity: 1; }
}
/* ════════ RECHERCHE PAR SECTIONS ════════ */
.search-section { padding: 40px 0 22px; }
.search-section .section-label { margin-bottom: 22px; }
.search-section-portraits { background: var(--warm); border-bottom: 1px solid var(--border); }
.search-section .articles-grid { margin-bottom: 8px; }
.search-noresult { font-size: 16px; color: var(--mid); padding: 20px 0 40px; }
/* ════════ ALGOLIA : liste d'autocomplete sur l'overlay sombre ════════ */
.algolia-autocomplete { width: 100%; }
.algolia-autocomplete .aa-dropdown-menu,
.aa-Panel {
background: var(--white);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 18px 50px rgba(0,0,0,.35);
margin-top: 10px;
overflow: hidden;
z-index: 10001; /* au-dessus de l'overlay de recherche */
font-family: var(--ff-ui);
text-align: left;
}
.algolia-autocomplete .aa-suggestion,
.aa-Item { padding: 12px 16px; cursor: pointer; }
.algolia-autocomplete .aa-suggestion.aa-cursor,
.aa-Item[aria-selected="true"] { background: var(--warm); }
.algolia-autocomplete .aa-suggestion em,
.aa-Panel em { font-style: normal; color: var(--ojim); font-weight: 700; }
.autocomplete-header { padding: 10px 16px 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--light); border-top: 1px solid var(--border); }
.aa-Panel .autocomplete-header:first-child, .algolia-autocomplete .autocomplete-header:first-child { border-top: 0; }
/* Recherche : état vide = suggestions de découverte */
.search-discover { padding-bottom: 50px; }
.search-discover-group { margin-top: 34px; }
.search-discover-group .section-label { margin-bottom: 16px; }
.search-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.search-chip { display: inline-block; font-family: var(--ff-ui); font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: 100px; padding: 9px 18px; text-decoration: none; transition: border-color .15s, background .15s, opacity .35s; }
.search-chip:hover { border-color: var(--ojim); background: var(--warm); }
/* Widget Soutenir en iframe (application de campagne externe) */
.don-widget-embed { padding: 0; overflow: hidden; }
.don-widget-embed iframe { display: block; width: 100%; border: 0; }
/* Home : section Publications (iframe du module de dons) */
.publications-section { background: var(--white); padding: 46px 0 56px; border-top: 1px solid var(--border); }
.publications-section .section-label { margin-bottom: 22px; }
.publications-embed iframe { display: block; width: 100%; border: 0; border-radius: 6px; background: var(--parchment); }
/* Home : widget Soutenir sous le top 5 (statique, pas de sticky ici) */
.hero-sidebar .don-widget { margin-top: 30px; }
/* Ticker : la copie de boucle hérite de la disposition ; immobile si demandé */
.ticker-track > span[aria-hidden] { display: flex; }
@media (prefers-reduced-motion: reduce) {
.ticker-track { animation: none; }
.ticker-track > span[aria-hidden] { display: none; }
}
/* ════════ HÉROS : géométrie stable (décisions) ════════
Extrait nourri (62 mots, plafond 5 lignes) : la colonne principale est
la plus haute des deux — si écart il y a, c'est elle qui l'absorbe, pas
la colonne de droite. L'image suit le flux, à écart fixe sous le lien
Lire l'article (l'ancrage bas est abandonné). */
.hero-main > a:last-of-type { display: block; margin-top: 28px; width: 100%; }
.hero-excerpt { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* ════════ BANDEAU COOKIES : carte dans l'angle inférieur gauche ════════
Sélecteurs relevés sur la structure DOM réelle (banc d'essai) :
#tarteaucitronAlertBig .tarteaucitronAllow / .tarteaucitronDeny /
#tarteaucitronCloseAlert. La carte reprend la charte du widget don. */
#tarteaucitronRoot #tarteaucitronAlertBig {
position: fixed !important;
left: 20px !important;
right: auto !important;
bottom: 20px !important;
width: 380px !important;
max-width: calc(100vw - 40px) !important;
box-sizing: border-box !important;
background: var(--dark) !important;
color: #f0ede6 !important;
padding: 24px 24px 20px !important;
border-radius: 10px !important;
box-shadow: 0 18px 50px rgba(0,0,0,.35) !important;
text-align: left !important;
font-family: var(--ff-ui) !important;
font-size: 13.5px !important;
line-height: 1.55 !important;
}
#tarteaucitronRoot #tarteaucitronDisclaimerAlert {
display: block !important;
margin: 0 0 16px !important;
padding: 0 !important;
font-size: 13.5px !important;
color: #f0ede6 !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCTAButton,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert {
display: inline-block !important;
margin: 0 8px 8px 0 !important;
padding: 10px 16px !important;
border-radius: 4px !important;
font-family: var(--ff-ui) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
cursor: pointer !important;
border: 1px solid transparent !important;
background: none !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronAllow {
background: var(--ojim) !important;
color: #fff !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronDeny {
background: transparent !important;
color: #f0ede6 !important;
border-color: rgba(255,255,255,.35) !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert {
background: transparent !important;
color: rgba(255,255,255,.55) !important;
padding-left: 0 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
/* Lien « Politique de confidentialité » (rendu par tarteaucitron quand
privacyUrl est renseigné) : sans ces règles il hérite des styles de la
page (noir, serif, bloc) — illisible sur la carte sombre. Aligné sur le
traitement de Personnaliser : discret, souligné, sur la même ligne. */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
display: inline-block !important;
margin: 0 8px 8px 0 !important;
padding: 10px 0 !important;
border: 0 !important;
background: transparent !important;
color: rgba(255,255,255,.55) !important;
font-family: var(--ff-ui) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
cursor: pointer !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl:hover,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert:hover { color: #fff !important; }
/* Pied du bandeau : les deux liens (Personnaliser, Politique de
confidentialité) en petit, côte à côte sur une seule ligne. Le
display:inline-block neutralise le rendu bloc de tarteaucitron, la
suppression des
neutralise ses retours à la ligne. */
#tarteaucitronRoot #tarteaucitronAlertBig br { display: none !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
display: inline-block !important;
width: auto !important;
margin: 4px 18px 0 0 !important;
padding: 4px 0 !important;
font-size: 10.5px !important;
letter-spacing: .05em !important;
white-space: nowrap !important;
vertical-align: baseline !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCheck,
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCross { display: none !important; }
@media (max-width: 480px) {
#tarteaucitronRoot #tarteaucitronAlertBig {
/* Marges strictement symétriques : ancrage gauche ET droit, largeur
déduite (le calc sur 100vw incluait la barre de défilement sur
certains mobiles — d'où le déséquilibre constaté). */
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
width: auto !important;
max-width: none !important;
}
}
.footer-bottom .footer-cookies,
footer a[href^="mailto:"] { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom .footer-cookies:hover,
footer a[href^="mailto:"]:hover { color: #fff; }
/* ════════ PANNEAU DE GESTION DES COOKIES : habillage charte ════════
Structure relevée au banc d'essai : #tarteaucitron > #tarteaucitronServices
> MainLineOffset (titre/intro/boutons globaux) > .tarteaucitronBorder > ul
> li par catégorie (_mandatory, _socialnetwork…) > .tarteaucitronLine. */
/* Voile */
#tarteaucitronRoot #tarteaucitronBack {
background: rgba(26, 26, 24, .62) !important;
opacity: 1 !important;
}
/* Le dialogue */
#tarteaucitronRoot #tarteaucitron {
background: var(--white) !important;
max-width: 720px !important;
width: calc(100vw - 32px) !important;
border-radius: 12px !important;
box-shadow: 0 30px 80px rgba(0,0,0,.4) !important;
font-family: var(--ff-ui) !important;
color: var(--ink) !important;
overflow: hidden !important;
}
#tarteaucitronRoot #tarteaucitronServices {
background: transparent !important;
box-shadow: none !important;
padding: 36px 40px 28px !important;
box-sizing: border-box !important;
}
/* Fermer : pastille discrète dans l'angle */
#tarteaucitronRoot #tarteaucitronClosePanel {
position: absolute !important;
top: 16px !important;
right: 16px !important;
background: transparent !important;
color: var(--mid) !important;
border: 1px solid var(--border) !important;
border-radius: 100px !important;
padding: 7px 14px !important;
font-family: var(--ff-ui) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
cursor: pointer !important;
width: auto !important;
}
#tarteaucitronRoot #tarteaucitronClosePanel:hover { color: var(--ink) !important; border-color: var(--mid) !important; }
/* Titre et intro */
#tarteaucitronRoot .tarteaucitronH1 {
display: block !important;
font-family: var(--ff-display) !important;
font-size: 26px !important;
font-weight: 700 !important;
color: var(--ink) !important;
text-align: left !important;
margin: 0 0 10px !important;
}
#tarteaucitronRoot #tarteaucitronInfo {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 0 22px !important;
font-size: 13.5px !important;
line-height: 1.6 !important;
color: var(--mid) !important;
text-align: left !important;
max-width: 56ch;
}
#tarteaucitronRoot #tarteaucitron hr { display: none !important; }
/* Rangée « Préférences pour tous les services » */
#tarteaucitronRoot #tarteaucitronMainLineOffset {
background: transparent !important;
border: 0 !important;
margin-bottom: 6px !important;
}
#tarteaucitronRoot .tarteaucitronH2 {
font-family: var(--ff-ui) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--light) !important;
}
/* Boutons : Autoriser plein orange, Interdire fantôme — état choisi net */
#tarteaucitronRoot #tarteaucitron .tarteaucitronAllow,
#tarteaucitronRoot #tarteaucitron .tarteaucitronDeny,
#tarteaucitronRoot #tarteaucitronSaveButton {
border-radius: 4px !important;
font-family: var(--ff-ui) !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
padding: 9px 15px !important;
margin: 2px 0 2px 8px !important;
cursor: pointer !important;
border: 1px solid transparent !important;
opacity: 1 !important;
}
#tarteaucitronRoot #tarteaucitron .tarteaucitronAllow {
background: var(--ojim) !important;
color: #fff !important;
}
#tarteaucitronRoot #tarteaucitron .tarteaucitronDeny {
background: transparent !important;
color: var(--ink) !important;
border-color: var(--border) !important;
}
/* L'état retenu s'affirme, l'autre s'efface */
#tarteaucitronRoot #tarteaucitron .tarteaucitronAllow[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ojim) !important; }
#tarteaucitronRoot #tarteaucitron .tarteaucitronDeny[aria-pressed="true"] { background: var(--dark) !important; color: #fff !important; border-color: var(--dark) !important; }
#tarteaucitronRoot #tarteaucitron .tarteaucitronAllow[aria-pressed="false"],
#tarteaucitronRoot #tarteaucitron .tarteaucitronDeny[aria-pressed="false"] { opacity: .85 !important; }
#tarteaucitronRoot #tarteaucitron .tarteaucitronCheck,
#tarteaucitronRoot #tarteaucitron .tarteaucitronCross { display: none !important; }
/* Liste des catégories */
#tarteaucitronRoot .tarteaucitronBorder {
background: transparent !important;
border: 0 !important;
}
#tarteaucitronRoot .tarteaucitronBorder > ul > li {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: 8px !important;
margin: 0 0 12px !important;
padding: 4px 0 !important;
overflow: hidden !important;
}
#tarteaucitronRoot .tarteaucitronTitle,
#tarteaucitronRoot .tarteaucitronTitle button {
background: transparent !important;
color: var(--ink) !important;
font-family: var(--ff-ui) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-align: left !important;
width: 100% !important;
padding: 12px 18px !important;
margin: 0 !important;
cursor: pointer !important;
}
/* Le « + » suggérait un dépliage inexistant : remplacé par la puce OJIM */
#tarteaucitronRoot .tarteaucitronPlus {
display: inline-block !important;
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: var(--ojim) !important;
margin-right: 10px !important;
vertical-align: middle !important;
color: transparent !important;
overflow: hidden !important;
}
#tarteaucitronRoot .tarteaucitronPlus::before,
#tarteaucitronRoot .tarteaucitronPlus::after { content: none !important; }
#tarteaucitronRoot .tarteaucitronDetails {
background: var(--cream) !important;
color: var(--mid) !important;
font-size: 12.5px !important;
padding: 10px 18px !important;
border: 0 !important;
max-width: none !important;
}
/* UX : les cookies OBLIGATOIRES se distinguent structurellement */
#tarteaucitronRoot #tarteaucitronServicesTitle_mandatory {
background: var(--warm) !important;
border-color: #E8DFD3 !important;
}
#tarteaucitronRoot #tarteaucitronServicesTitle_mandatory .tarteaucitronTitle button {
cursor: default !important;
position: relative !important;
padding-right: 130px !important;
}
#tarteaucitronRoot #tarteaucitronServicesTitle_mandatory .tarteaucitronTitle button::after {
content: 'Toujours actifs';
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
background: var(--dark);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 100px;
}
#tarteaucitronRoot #tarteaucitronServices_mandatory .tarteaucitronH3 {
font-weight: 400 !important;
font-size: 12.5px !important;
color: var(--mid) !important;
}
/* Lignes de services optionnels */
#tarteaucitronRoot #tarteaucitron .tarteaucitronLine {
background: transparent !important;
border-left: 0 !important;
padding: 12px 18px !important;
}
#tarteaucitronRoot #tarteaucitron .tarteaucitronLine .tarteaucitronH3 {
font-family: var(--ff-ui) !important;
font-size: 13.5px !important;
font-weight: 600 !important;
color: var(--ink) !important;
}
#tarteaucitronRoot #tarteaucitron .tarteaucitronLine .tarteaucitronListCookies,
#tarteaucitronRoot #tarteaucitron .tarteaucitronLine a {
color: var(--mid) !important;
font-size: 11.5px !important;
}
#tarteaucitronRoot #tarteaucitron .tarteaucitronLine a:hover { color: var(--ojim) !important; }
/* Enregistrer */
#tarteaucitronRoot #tarteaucitronSaveButton {
background: var(--dark) !important;
color: #fff !important;
margin: 14px 0 0 !important;
padding: 12px 22px !important;
}
#tarteaucitronRoot #tarteaucitronSaveButton:hover { background: #000 !important; }
@media (max-width: 600px) {
#tarteaucitronRoot #tarteaucitronServices { padding: 26px 18px 20px !important; }
#tarteaucitronRoot .tarteaucitronH1 { font-size: 21px !important; padding-right: 70px !important; }
}
/* Panneau cookies : liste des obligatoires — nom en label, rôle dessous */
#tarteaucitronRoot #tarteaucitronServices_mandatory .tarteaucitronH3 { line-height: 1.6 !important; font-weight: 400 !important; }
#tarteaucitronRoot .tac-cookie { display: block; margin-top: 16px; }
#tarteaucitronRoot .tac-cookie-name {
display: inline-block;
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .02em;
color: var(--ink) !important;
background: var(--white);
border: 1px solid var(--border);
border-radius: 4px;
padding: 3px 9px;
line-height: 1.6;
}
#tarteaucitronRoot .tac-cookie-role {
display: block;
margin-top: 5px;
font-size: 12.5px !important;
color: var(--mid) !important;
line-height: 1.55;
}
/* Page auteur : section Portraits sous les articles */
.author-portraits { margin-top: 46px; padding: 36px 0 64px; border-top: 1px solid var(--border); } /* padding bas harmonisé */
.author-portraits-count { font-family: var(--ff-ui); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--light); }
/* ════════ IMPRESSION : titre, image, texte — rien d'autre ════════
Doctrine (décision) : tout le chrome et le superflu disparaissent, y
compris les cartes « Voir aussi » du contenu, le sommaire et la ligne de
métadonnées. Portrait : la carte d'identité devient un encadré sous la
photo. Les liens du texte impriment leur URL (les sources survivent). */
@media print {
@page { margin: 16mm; }
/* Chrome et superflu */
header, footer, .ticker, .encart, .encart-section, .single-share-box,
.don-widget, .single-donate, .single-related, .author-box, .drawer,
.search-overlay, #tarteaucitronRoot, .lwptoc, .newsletter-section,
.breadcrumb, .btn-don, .single-meta, .ojim-embed,
.hero-image-caption { display: none !important; }
/* Une colonne, noir sur blanc, compacte */
body { background: #fff !important; color: #000 !important; }
.single-wrap, .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.single-columns { display: block !important; }
.single-sidebar { display: none !important; }
.single-title { font-size: 21pt !important; line-height: 1.2 !important; margin: 0 0 4mm !important; }
.single-lead { margin: 0 0 5mm !important; font-size: 12pt !important; }
.single-hero { margin: 0 0 5mm !important; }
.single-hero img { width: 100% !important; height: auto !important; }
.single-hero figcaption { font-size: 8pt; color: #555; } /* crédit photo conservé */
.single-body { max-width: none !important; font-size: 11.5pt !important; line-height: 1.55 !important; }
.single-body p { margin: 0 0 3.5mm !important; orphans: 3; widows: 3; }
.single-body h2, .single-body h3 { margin: 6mm 0 2.5mm !important; page-break-after: avoid; }
a { color: #000 !important; text-decoration: none !important; }
.single-body a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
/* Portrait : photo compacte, puis nom, puis l'encadré carte d'identité */
.portrait-head { display: block !important; margin: 0 0 5mm !important; }
.portrait-photo { width: 48mm !important; max-width: 48mm !important; aspect-ratio: auto !important; margin: 0 0 4mm !important; }
.portrait-photo img { width: 48mm !important; height: auto !important; }
.portrait-function { margin: 0 0 4mm !important; font-size: 12pt !important; }
.portrait-idcard {
border: 1pt solid #000 !important;
background: #fff !important;
padding: 5mm !important;
margin: 0 0 6mm !important;
page-break-inside: avoid;
}
.portrait-idcard-title {
font-size: 9pt !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
margin: 0 0 3mm !important;
}
.portrait-idcard * { color: #000 !important; font-size: 10pt; }
}
/* ════════ TABLEAUX DE CONTENU (remplace le plugin de tableaux) ════════
Carte blanche sur le fond crème, chiffres tabulaires, dernière colonne à
droite (motif clé/valeur de la presse), ligne Total (gras en clôture)
soulignée d'un filet fort. Mobile : défilement horizontal dans
l'enveloppe posée au rendu, sans écrasement des colonnes. */
.ojim-table-scroll { overflow-x: auto; margin: 28px 0; -webkit-overflow-scrolling: touch; }
.single-body .ojim-table-scroll table,
.single-body table {
width: 100%;
min-width: 420px;
border-collapse: collapse;
background: #fff;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
font-family: var(--ff-ui);
font-size: 14.5px;
line-height: 1.5;
font-variant-numeric: tabular-nums;
margin: 0;
}
.single-body .ojim-table-scroll table { margin: 0; }
.single-body table caption {
caption-side: top;
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--light);
padding: 0 0 10px;
}
.single-body table th,
.single-body table td {
padding: 11px 16px;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.single-body table th:last-child,
.single-body table td:last-child { text-align: right; }
.single-body table thead th {
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mid);
background: var(--warm);
border-bottom: 2px solid var(--dark);
}
.single-body table tbody tr:last-child th,
.single-body table tbody tr:last-child td { border-bottom: 0; }
/* Ligne de total : dernière ligne portant du gras */
.single-body table tbody tr:last-child:has(strong) th,
.single-body table tbody tr:last-child:has(strong) td {
border-top: 2px solid var(--dark);
background: var(--warm);
}
@media (max-width: 600px) {
.single-body table { font-size: 13px; }
.single-body table th, .single-body table td { padding: 9px 12px; }
}
@media print {
.ojim-table-scroll { overflow: visible; }
.single-body table { min-width: 0; border-color: #000 !important; }
.single-body table th, .single-body table td { border-color: #000 !important; }
}
/* ════════ NEWSLETTER EN ENCART D'ARTICLE (shortcode [ojim_newsletter]) ════
Même moteur que la bande du footer, habit clair pour le corps de texte :
les champs sombres de la bande sont réinterprétés sur fond chaud. */
.newsletter-inline { background: var(--warm); border: 1px solid var(--border); border-left: 3px solid var(--ojim); border-radius: 6px; padding: 26px 28px; margin: 32px 0; }
.newsletter-inline-title { font-family: var(--ff-display); font-size: 21px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.newsletter-inline-desc { font-family: var(--ff-ui); font-size: 13.5px; color: var(--mid); line-height: 1.55; margin: 0 0 16px; }
.newsletter-inline .newsletter-form input[type="email"] { background: #fff; color: var(--ink); border: 1px solid var(--border); }
.newsletter-inline .newsletter-form input[type="email"]::placeholder { color: var(--light); }
.newsletter-inline .newsletter-form button { background: var(--ojim); }
.newsletter-inline .newsletter-form button:hover { background: var(--ojim-dark, #b53a26); }
.newsletter-inline .newsletter-optin span { color: var(--mid); }
.newsletter-inline .newsletter-optin input[type="checkbox"] { accent-color: var(--ojim); }
.newsletter-inline .newsletter-msg .is-ok { color: #3E7C4C; }
.newsletter-inline .newsletter-msg .is-err { color: #C2432E; }
@media print { .newsletter-inline { display: none !important; } }